Ionic 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 ... 如何解決？

我想做的是合併兩個圖像（900×900）在彼此的頂部，以一個圖像。

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

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

（從照相機的base64圖像）應用濾波器上this.originalImage

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

我發現了一個解決方案。

我得到的錯誤是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"); 

    ...