Crop images before upload

[EGreg]

Right now, when uploading images, there is too much latency and too much bandwidth is wasted, especially on mobile phones.

In all browsers that support it, the "Q/imagepicker" should perform the "crop" operation, if any, in the browser, before sending the result down to the server. If this is done in the browser, then the "crop" is unset in the request to the server. See the comment below for how to do that.

Bundle the Jcrop plugin inside plugins/Q/web/js directory: http://deepliquid.com/content/Jcrop.html

Implement a private function that "preprocess" will be set to by default, called _preprocess . It would load the JCrop javascript and throw up a dialog via Q.Dialogs.push() that would display the uploaded image with the JCrop, with options taken from .jcrop option of the "Q/imagepicker" plugin. If the "crop" option is already specified, then this private function would call animateTo on the JCrop, and would use setSelect to make sure that the width and height of the selection are always in the same aspect ratio, and do not become smaller than the values in "crop". If the image is too small, then the initial crop area should be moved towards the top left (0, 0) corner. If it is smaller than the crop area, then this function should show an alert("Please choose a larger image.") and cancel. After all, if the developer wanted to have a smaller crop area, they could just provide smaller numbers in the same aspect ratio.

Just to be clear: if options.preprocess is either null or has called its callback, if options.crop is specified, it's time to crop and then send the info to the server without the crop field.

[EGreg]

Here is how to perform the crop operation:

var canvas = document.getElementById('myCanvas');
if (!!(canvas && canvas.getContext && canvas.getContext('2d'))) {
  return; // canvas not supported
}
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
  // draw cropped image
  var sourceX = 150;
  var sourceY = 0;
  var sourceWidth = 150;
  var sourceHeight = 150;
  var destWidth = sourceWidth;
  var destHeight = sourceHeight;
  var destX = canvas.width / 2 - destWidth / 2;
  var destY = canvas.height / 2 - destHeight / 2;

  context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  imageData = canvas.toDataUrl.apply(canvas, options.toDataUrl);
};
imageObj.src = dataUrl;

it might be nice to have options.toDataUrl in Q/imagepicker to override the arguments passed to that function

[glebv]

I guess, more preferable way to add the functionality, it's to add JCrop functionality to Q/viewport thus users will have possibilities zoom image and crop it simultaneously. Invocation of Q.Dialog with viewport + JCrop can be added as option.

[EGreg]

in imagepicker we can have a "cropping" option it would be an object with the following possible properties: "dialog" - if true, then we use dialog, otherwise we do Q/viewport on the actual image "jCrop" - if true, then we use jCrop in addition to Q/viewport, and only call preprocess at the end of both cropping: true would be same as cropping: { } which means cropping without dialog or jCrop, but just with Q/viewport. (remember to handle onRelease event in the right place in Q/viewport) ᐧ

Sincerely, Greg Magarshak CEO, Qbix Inc. http://qbix.com

On Tue, Jun 17, 2014 at 11:02 AM, glebv notifications@github.com wrote:

I guess, more preferable way to add the functionality, it's to add JCrop functionality to Q/viewport thus users will have possibilities zoom image and crop it simultaneously. Invocation of Q.Dialog with viewport + JCrop can be added as option.

— Reply to this email directly or view it on GitHub https://github.com/EGreg/Q/issues/1#issuecomment-46319021.

[glebv]

cropping options implemented, closed