scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 307 forks source link

Does it work on IOS devices ? #275

Open whria78 opened 6 years ago

whria78 commented 6 years ago

Hello.

I failed to the correct crop images when I tested the demo (http://scottcheng.github.io/cropit/) with iOS devices (ipad 1,iphone 6 ...).

The problem is that the width of uploaded images is actually the height, vice versa.

I can temporarily fixed the problem, by adding this codes. (There need 90' clockwide rotation of the original image to fix this problem.)

Is there better fix for this problem ?

Thanks you

var iDevices = [ 'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod' ];

if (!!navigator.platform) { while (iDevices.length) { if (navigator.platform === iDevices.pop()){

      var canvas = (0, _jquery2['default'])('<canvas />').attr({
        width: this.image.height,
        height: this.image.width
      }).get(0);
      var canvasContext = canvas.getContext('2d');
      if (exportOptions.type === 'image/jpeg') {
        canvasContext.fillStyle = exportOptions.fillBg;
        canvasContext.fillRect(0, 0, canvas.width, canvas.height);
      }
      canvasContext.translate(canvas.width/2,canvas.height/2);
      canvasContext.rotate(90*Math.PI/180);
      canvasContext.drawImage(this.image,-this.image.width/2,-this.image.height/2);
      canvasContext.restore();
      var canvas2 = (0, _jquery2['default'])('<canvas />').attr({
        width: this.previewSize.width * exportZoom,
        height: this.previewSize.height * exportZoom
      }).get(0);

      var canvasContext2 = canvas2.getContext('2d');
      if (exportOptions.type === 'image/jpeg') {
        canvasContext2.fillStyle = exportOptions.fillBg;
        canvasContext2.fillRect(0, 0, canvas2.width, canvas2.height);
      }
      canvasContext2.translate(this.rotatedOffset.x * exportZoom, this.rotatedOffset.y * exportZoom);
      canvasContext2.rotate(this.rotation * Math.PI / 180);
      canvasContext2.drawImage(canvas, 0, 0, zoomedSize.height,zoomedSize.width);
      return canvas2.toDataURL(exportOptions.type, exportOptions.quality);

  }
}

}

1 2