Question

所以我上传了一个图像文件并将其绘制到画布上，但是这会停止页面上的裁剪功能。

上传代码如下所示：

HTML：

<input type='file' id="fileUpload" />

JavaScript的：

function el(id){return document.getElementById(id);} // Get elem by ID

var canvas  = el("canvas");
var context = canvas.getContext("2d");

function readImage() {
if ( this.files && this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
       var img = new Image();
       img.addEventListener("load", function() {
         context.drawImage(img, 0, 0);
       });
       img.src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
  }
}

el("fileUpload").addEventListener("change", readImage, false);

我正在使用this解决方案裁剪图像。

目前我已经取代了

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/houses1.jpg";

使用替代上传脚本，但这似乎停止了裁剪脚本。

这有什么解决方案吗？

图像上传到画布后，功能停止工作

0 个答案: