이오닉 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;

처럼
내가 엑스 코드에서 얻을 오류가 나는 아이폰 OS 10.3.1 ... 로 업데이트하기 전에이 내가 어떻게 해결합니까 일
{"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"}

입니까?

내가 원하는 것은 서로의 위에 두 이미지 (900x900)를 하나의 이미지에 병합하는 것입니다.

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 이상에서만 작동합니다. så 다른 {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"); 

    ...