Ionic 2 iOS 10.3 - canvas.toDataURL() 错误：操作不安全答案

【问题标题】：Ionic 2 iOS 10.3 - canvas.toDataURL() error: the operation is insecureIonic 2 iOS 10.3 - canvas.toDataURL() 错误：操作不安全
【发布时间】：2017-09-15 17:23:36
【问题描述】：

当我使用本地图像时，canvas.toDataURL("image/jpg") 正在工作。
赞这个this.originalImage = 'assets/img/defaultImage-900.jpg';

当我将其更改为相机中的图片时，它无法正常工作。
赞这个this.originalImage = "data:image/jpeg;base64," + imageData;

我在 Xcode 中遇到的错误是
{"code":18,"name":"SecurityError","message":"The operation is insecure.","line":40830,"column":61,"sourceURL":"http://localhost:8080/var/containers/Bundle/Application/4FDE886B-8A64-46AD-8E0C-FDA23C5218CD/Oslo%20Origo.app/www/build/main.js"}

这在我更新到 iOS 10.3.1 之前有效... 我该如何解决？

我想要做的是将两张图像 (900x900) 合并为一张图像。

save() {
//get filter index
this.selectedFilter = this.slides.getActiveIndex();

// run the canvas thing
this.applyFilter(this.filters[this.selectedFilter]).subscribe(() => {
  //done
});
}

在this.originalImage（来自相机的base64图像）上应用过滤器

applyFilter(filterUrl: string) {
  return Observable.create((observer: any) => {

  let baseImg = new Image();
  let filterImg = new Image();

  let canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");

  baseImg.src = this.originalImage;

  baseImg.onload = () => {
    canvas.width = baseImg.width;
    canvas.height = baseImg.height;
    ctx.drawImage(baseImg, 0, 0);

    filterImg.src = filterUrl;

    filterImg.onload = () => {
      let hRatio = canvas.width / filterImg.width;
      let vRatio = canvas.height / filterImg.height;
      let ratio = Math.max(hRatio, vRatio);
      let centerShift_x = (canvas.width - filterImg.width * ratio) / 2;
      let centerShift_y = (canvas.height - filterImg.height * ratio) / 2;
      ctx.drawImage(filterImg, 0, 0, filterImg.width, filterImg.height, centerShift_x, centerShift_y, filterImg.width * ratio, filterImg.height * ratio);


      try{ 
        this.resultImage = canvas.toDataURL("image/jpg");
      } catch (error){
        console.log(error)
      }

      observer.next();
    }
  };

});

}

相机设置

    // set options
    let options = { 
        quality : 30,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : 1,
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        cameraDirection: Camera.Direction.FRONT,
        correctOrientation: true,
        saveToPhotoAlbum: false,
        targetHeight: 900,
        targetWidth: 900
    };


      Camera.getPicture(options).then((imageData) => {
          this.zone.run(() => {
              this.originalImage = "data:image/jpeg;base64," + imageData;
          });
      }, (err) => {
          if(this.originalImage == null || undefined){
            this.navCtrl.setRoot(SocialTabsPage, { tabIndex: 0 });
          }
      });

【问题讨论】：

不工作是什么意思？您能否解释正在发生的错误，或者请给出日志语句？
Xcode 没有给我任何形式的错误...只是停止运行。我在this.resultImage = canvas.toDataURL("image/jpg"); 之前 console.log 的所有内容都运行良好。此行未运行后...
我没有更新问题。添加了 try {} 函数。 The operation is insecure.
您是否使用 WKWebView 来显示您的画布？
其实，这听起来像是 CORS 问题（跨域资源共享）...您是否尝试过将图像从相机保存到文档目录。然后拉图像数据？另外，请尝试webView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs") 来帮助处理 CORS

标签： javascript ios cordova ionic2 todataurl

【解决方案1】：

我找到了解决办法。

我得到的错误是The operation is insecure.。无论出于何种原因，该应用程序不喜欢我使用相机中的图像。

所以我在来自相机的图像中添加了baseImg.crossOrigin = 'anonymous';，在滤镜图像中添加了filterImg.crossOrigin = 'anonymous';。

但这仅适用于 iOS 10.3 及更高版本，因此我添加了另一个 if{} 函数。

所以现在看起来像这样......

  ...

  let baseImg = new Image();
  let filterImg = new Image();

  if (this.platform.is('ios')){
    if (this.platform.version().num > 10.2){
      baseImg.crossOrigin = 'anonymous';
      filterImg.crossOrigin = 'anonymous';
    }
  }
  let canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");

  ...

【讨论】：

将 baseImg 和 filterImg 都设置为“匿名”也适用于我。但我也必须有条件地测试 IOS10.3，因为将 crossOrigin 设置为“匿名”在 IOS9 中不起作用/失败

【解决方案2】：

对于未来有类似问题的人。在我的例子中，originalImage 来自 HTML。

当它的 HTML 是这样时，我遇到了同样的错误：

<img src="https://example.com/img.jpg" crossorigin="anonymous" ... />

我只是简单地改变了属性的顺序，错误就消失了：

<img crossorigin="anonymous" src="https://example.com/img.jpg" ... />

【讨论】：