SecurityError：操作不安全。在HTML画布中

Question

我正在尝试使用带有调整大小选项的HTML canvas来实现远程图像裁剪。当文件是本地文件但使用remote URL之类的https://somewebsite.com/assets/9.jpg时，代码可以在控制台中得到如下所示的错误。拖动有效，但调整大小和裁剪不起作用。

错误：

SecurityError: The operation is insecure. 13 component.js:126
    resizeImage http://localhost:8080/js/component.js:126:33
    resizing http://localhost:8080/js/component.js:116:7
    dispatch http://localhost:8080/js/jquery-2.1.1.min.js:3:6352
    add/r.handle http://localhost:8080/js/jquery-2.1.1.min.js:3:3162

HTML：

<div class="component">
    <img class="resize-image" src="https://somewebsite.com/assets/9.jpg" alt="image for resizing" crossOrigin="anonymous">
    <button class="btn-crop js-crop">Crop<img class="icon-crop" src="img/crop.svg"></button>
</div>

使用Javascript：

if(width > min_width && height > min_height && width < max_width && height < max_height){
  // To improve performance you might limit how often resizeImage() is called
  resizeImage(width, height);  
  // Without this Firefox will not re-calculate the the image dimensions until drag end
  $container.offset({'left': left, 'top': top});
}
.
.
.
.

  resizeImage = function(width, height){
        resize_canvas.width = width;
        resize_canvas.height = height;
        resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);   
        $(image_target).attr('src', resize_canvas.toDataURL("image/png"));  
      };