fixes w/ profile photo cut

iliakan · iliakan · commit 02207666ecd6 · 2015-05-12T13:12:32.000+03:00
diff --git a/client/head/navigationArrows.js b/client/head/navigationArrows.js
@@ -4,7 +4,9 @@ var ctrlOrAlt = ~navigator.userAgent.toLowerCase().indexOf("mac os x") ? 'ctrl'
 
 function onKeyDown(event) {
   // don't react on Ctrl-> <- if in text
-  if (~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(document.activeElement.tagName)) return;
+  if (document.activeElement) {
+    if (~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(document.activeElement.tagName)) return;
+  }
 
   if (!event[ctrlOrAlt + 'Key']) return;
 
diff --git a/client/head/sidebar.js b/client/head/sidebar.js
@@ -29,7 +29,9 @@ function onClick(event) {
 
 function onKeyDown(event) {
   // don't react on Ctrl-> <- if in text
-  if (~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(document.activeElement.tagName)) return;
+  if (document.activeElement) {
+    if (~['INPUT', 'TEXTAREA', 'SELECT'].indexOf(document.activeElement.tagName)) return;
+  }
 
   if (event.keyCode != "S".charCodeAt(0)) return;
 
diff --git a/handlers/profile/client/directive/profilePhoto.js b/handlers/profile/client/directive/profilePhoto.js
@@ -22,7 +22,7 @@ angular.module('profile')
           fileInput.accept = "image/*";
 
           fileInput.onchange = function() {
-
+            fileInput.remove();
             var reader = new FileReader();
             var file = fileInput.files[0];
 
@@ -36,7 +36,6 @@ angular.module('profile')
                   uploadPhoto(file);
                 } else {
                   cutPhoto(image, function(blob) {
-                    // TODO: server-side
                     // @see http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server
                     // @see http://stackoverflow.com/questions/12391628/how-can-i-upload-an-embedded-image-with-javascript
                     uploadPhoto(blob);
@@ -48,7 +47,12 @@ angular.module('profile')
             reader.readAsDataURL(file);
 
           };
+
+          // must be in body for IE
+          fileInput.hidden = true;
+          document.body.appendChild(fileInput);
           fileInput.click();
+
         };
 
         function uploadPhoto(file) {
diff --git a/handlers/users/controllers/id.js b/handlers/users/controllers/id.js
@@ -49,7 +49,8 @@ exports.del = function*(next) {
 };
 
 
-var readMultipart = thunkify(function(req, done) {
+var readMultipart = thunkify(function(ctx, done) {
+  var req = ctx.req;
 
   var hadError = false;
   var fields = {};
@@ -60,11 +61,14 @@ var readMultipart = thunkify(function(req, done) {
   var form = new multiparty.Form();
 
   form.on('field', function(name, value) {
+    ctx.log.debug("Field", name, value);
     fields[name] = value;
   });
 
   // multipart file must be the last
   form.on('part', function(part) {
+    ctx.log.debug("Part", part.name, part.filename);
+
     // upload multipart to imgur, no other multipart items in the form
     if (part.name != 'photo') {
       return onError(new Error("Unexpected multipart field: " + part.name));
@@ -76,6 +80,7 @@ var readMultipart = thunkify(function(req, done) {
     }
 
     co(function*() {
+      // filename='blob' for FormData(photo, blob) where blob comes from canvas.toBlob
       return yield* imgur.uploadStream(part.filename, part.byteCount, part);
     }).then(function(result) {
       if (hadError) return;
@@ -113,7 +118,7 @@ exports.patch = function*(next) {
 
   var fields;
   try {
-    fields = yield readMultipart(this.req);
+    fields = yield readMultipart(this);
   } catch (e) {
     if (e.name == 'BadImageError') {
       this.throw(400, e.message);
diff --git a/modules/imgur/index.js b/modules/imgur/index.js
@@ -29,7 +29,6 @@ exports.transload = function*(url) {
   }
 
   return response.data;
-
 };
 
 exports.uploadBuffer = function*(fileName, buffer) {
@@ -55,6 +54,9 @@ custom_file: {
  */
 exports.uploadStream = function*(fileName, knownLength, stream) {
 
+  if (!knownLength) {
+    throw new BadImageError("Пустое изображение.");
+  }
   var mimeType = mime.lookup(fileName);
 
   var response = yield* imgurRequest('image', {
diff --git a/modules/photoCut/index.js b/modules/photoCut/index.js
@@ -18,7 +18,7 @@ exports.cutPhoto = function(img, onSuccess) {
   selectionCanvas.width = selectionCanvas.offsetHeight;
   selectionCanvas.height = selectionCanvas.offsetWidth;
 
-  var photoCut = new PhotoCut(canvas);
+  var photoCut = new PhotoCut(canvas, { maxImageSize: 300 });
   photoCut.setImage(img);
 
   /*
@@ -51,30 +51,32 @@ exports.cutPhoto = function(img, onSuccess) {
 
   modal.elem.querySelector('[data-action="done"]').addEventListener('click', () => {
 
-    modal.remove();
-
     var selection = photoCut.getCanvasSelection();
 
     if (!selection) return;
 
     // resize canvas to the actual selection part of the image,
     // to make as large as possible resolution/size avatar
-    selectionCanvas.width = selection.width;
-    selectionCanvas.height = selection.height;
+    selectionCanvas.width = selection.size;
+    selectionCanvas.height = selection.size;
+
 
     // draw the selected piece on the canvas to make Blob of it
     selectionCanvas.getContext('2d').drawImage(
-      selection.source, selection.x, selection.y, selection.width, selection.height,
-      0, 0, selection.width, selection.height
+      selection.source, selection.x, selection.y, selection.size, selection.size,
+      0, 0, selection.size, selection.size
     );
 
+    modal.remove();
+
     selectionCanvas.toBlob(
       function (blob) {
         onSuccess(blob);
       },
       'image/jpeg'
     );
 
+
   });
 
 };
diff --git a/modules/photoCut/photoCut.js b/modules/photoCut/photoCut.js
@@ -3,7 +3,9 @@ const CanvasSelection = require('./canvasSelection');
 
 class PhotoCut {
 
-  constructor(canvas) {
+  constructor(canvas, {maxImageSize} = {}) {
+    this.maxImageSize = maxImageSize || 200;
+
     this.canvas = canvas;
 
     this.canvas.onmousedown = event => this.onMouseDown(event);
@@ -28,12 +30,11 @@ class PhotoCut {
 
   setImage(img) {
     // fit into document & 400px
-    var maxImageSize = Math.min(document.documentElement.clientHeight, document.documentElement.clientWidth, 300);
 
     this.img = img;
 
     // fit to canvas
-    this.scale = Math.min(maxImageSize / img.width, maxImageSize / img.height);
+    this.scale = Math.min(this.maxImageSize / img.width, this.maxImageSize / img.height);
 
     this.fullImageCanvas = document.createElement('canvas');
     this.fullImageCtx = this.fullImageCanvas.getContext('2d');
@@ -125,7 +126,6 @@ class PhotoCut {
   onMouseMove(event) {
     // coords may be anywhere in the document
 
-    console.log("HERE!!!", event.clientX);
     // recalculate relative to canvas image edge
     var coords = this.getEventCoordsRelativeCanvasImage(event);
 
@@ -135,9 +135,6 @@ class PhotoCut {
     if (coords.y < 0) coords.y = 0;
     if (coords.y > this.height) coords.y = this.height;
 
-    console.log(coords);
-
-    console.log(this.state);
     switch (this.state) {
     case false:
       this.showCursorAtCoords(coords);
@@ -176,8 +173,6 @@ class PhotoCut {
         coords.x > center.x && coords.y < center.y ? 'ne' :
           'se';
 
-    console.log(direction);
-
     switch (direction) {
     case 'nw':
       this.selectionStartCoords = {
@@ -209,7 +204,6 @@ class PhotoCut {
   }
 
   moveSelection(coords) {
-    // console.log("moveSelection");
     var x = Math.min(coords.x - this.mouseDownShift.x, this.width - this.selection.size);
     var y = Math.min(coords.y - this.mouseDownShift.y, this.height - this.selection.size);
     if (x < 0) x = 0;
@@ -279,7 +273,6 @@ class PhotoCut {
   }
 
   onMouseUp(event) {
-    //console.log(event.type, event.clientX, event.clientY);
     if (!this.state) return;
     this.state = false;
 
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "bunyan": "*",
     "co": "*",
     "css-loader": "*",
-    "csv-parse": "^0.1.0",
+    "csv-parse": "*",
     "del": "*",
     "docxtemplater": "*",
     "elasticsearch": "*",
