Ionic 2 iOS 10.3 - canvas.toDataURL（）エラー：操作が安全でない

Question

はローカルの画像を使用しているときに機能しています。
このように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にアップデートする前にこれは... 私はどのように修正すればよいが働いていましたか？

私がしたいことは、お互いの上にある2つのイメージ（900x900）を1つのイメージにマージすることです。

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

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

私は解決策を見つけた

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

をthis.originalImage（カメラからのbase64でエンコードされた画像）にフィルタを適用します。

エラーはThe operation is insecure.でした。そして、何らかの理由で、私がカメラから画像を使用していることをアプリが気に入らなかった。

カメラの画像にbaseImg.crossOrigin = 'anonymous';、画像にfilterImg.crossOrigin = 'anonymous';を追加しました。

これはiOS 10.3以降でのみ有効です。såif {if} if another 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"); 

    ...