CORS issue with canvas

[amuramoto]

After drawing an image from the local file system (/www/img) to a canvas, I receive a CORS error when attempting to extract the image data from the canvas.

The error is:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data

Here is the code I used to reproduce. Creating the canvas copy is probably not necessary, but for completeness I'm including all the code.

//draw original image to canvas, and create a copy of the canvas
private drawImage (imageUri) {      
    this.image = new Image();
    this.image.onload = () => {         
        this.canvasWidth = window.innerWidth - 40;
        this.canvasHeight = (this.canvasWidth / this.image.width) * this.image.height - 40 ;    
        this.photoCtx.canvas.width = this.canvasWidth;
        this.photoCtx.canvas.height = this.canvasHeight;        
        this.photoCtx.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
                            0, 0, this.canvasWidth, this.canvasHeight);

      this.canvasCopy = this.photoCanvas.cloneNode();
      this.ctxCopy = this.canvasCopy.getContext("2d");
      this.ctxCopy.drawImage(this.image, 0, 0, this.image.width - 40, this.image.height - 40,
                                                 0, 0, this.canvasWidth, this.canvasHeight)
    }
    this.image.src=imageUri;
  }

private getImageData () {
     //throws CORS error
      let imageData = this.ctxCopy.getImageData(0,0,this.canvasWidth, this.canvasHeight);
}

[manucorporat]

@amuramoto thanks for the report!

• which iOS BaseSDK are you using?
• which version of iOS is running your device/simulator?

[amuramoto]

iOS SDK 9.3 iOS 9.3.4

[eusthace811]

Any news about this issue with the new version? I am asking myself if I can use it with canvas to generate and load a base64string image...

[joshgarwood]

@manucorporat same here... I'm unable to use canvas.toDataURL with wkwebview. It works fine on android. Am i missing something... Should this work, or is it known that it's just not implemented yet?

[mrbase]

I too have the same issue. Any of you got a workaround you use ?

[mrbase]

For anyone interested I used the FileReader() api instead.

[joshgarwood]

@manucorporat is this being investigated at all? I'm unable to use core features of canvas (such as toDataURL for cropping and dynamic images). It works without an issue on Android, but fails on iOS with WkWebview. Any insight would be extremely appreciated.

[SamDelgado]

@joshgarwood I discuss a fix for this in #140