离子2 iOS 10.3- canvas.todataurl()错误:操作是不安全的

Question

当我使用本地图像时，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 });
          }
      });

Answer 1

对于有类似问题的未来人。就我而言，originalImage来自HTML。

当它的html这样时，我遇到了相同的错误：

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

我只是更改了属性的顺序，错误消失了：

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

Answer 2

我找到了一个解决方案。

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

所以我从相机和 filterImg.crossOrigin = 'anonymous';添加了 baseImg.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");
  ...