diff options
| -rw-r--r-- | client/button.js | 2 | ||||
| -rw-r--r-- | client/colors.less | 5 | ||||
| -rw-r--r-- | client/effects.js | 3 | ||||
| -rw-r--r-- | client/templates/photos.html | 4 |
4 files changed, 9 insertions, 5 deletions
diff --git a/client/button.js b/client/button.js index 0d72f7a..420224d 100644 --- a/client/button.js +++ b/client/button.js @@ -43,7 +43,9 @@ Template.dates.helpers({ Template.photos.events({ 'click button.pixelate': function (event) { _.each(Session.get('photos'), function(x) { + $('#img-'+x.id).hide() Effects.pixelate(x.id); + $('#canvas-'+x.id).show() }) } }) diff --git a/client/colors.less b/client/colors.less index eb77db9..15d45e4 100644 --- a/client/colors.less +++ b/client/colors.less @@ -110,14 +110,15 @@ body { flex-wrap: wrap; div.photo { margin: 3px 8px; + width: 54px; div.title { color: #333; font-size: 0.7em; text-align: center; } img { - height: 50px; - width: 50px; + height: 54px; + width: 54px; } } } diff --git a/client/effects.js b/client/effects.js index 52e1bcc..3743b9e 100644 --- a/client/effects.js +++ b/client/effects.js @@ -5,7 +5,7 @@ Effects = (function() { var raster = new paper.Raster('img-' + id); raster.visible = false; - var gridSize = 20; + var gridSize = 6; var gridDim = 9; var colors = []; @@ -29,6 +29,7 @@ Effects = (function() { } paper.view.draw(); + return; var quant = MMCQ.quantize(colors, 2); var palette = quant.palette(); diff --git a/client/templates/photos.html b/client/templates/photos.html index 3a4866c..4ffc198 100644 --- a/client/templates/photos.html +++ b/client/templates/photos.html @@ -15,14 +15,14 @@ {{> photo}} {{/each}} </div> + <button class="pixelate btn btn-default">Pixelate</button> </div> - <!-- <button class="pixelate btn btn-default">Pixelate</button> --> </template> <template name="photo"> <div class="photo"> <div class="title">{{date}}</div> <img id="img-{{id}}" src="{{images.thumbnail.url}}" crossorigin="anonymous"> - <!-- <canvas id="canvas-{{id}}" resize="true" style="width: 180px; height: 230px;"></canvas> --> + <canvas id="canvas-{{id}}" style="display: none;"></canvas> </div> </template> |