context.getImageData fails only after image is drawn to canvas about react-native-canvas

[conor-kelleher]

And just for extra clarity, this is tested using the latest version of your repo and the example project inside

[conor-kelleher]

By throwing a few console.logs into Canvas.js, I found that the problem is that sometimes the data variable that is returned can be an error message and this isn't being checked. The full JSON of the erroneous parsed data I got is as follows:

{
    "id":0.022208261900120263,
    "type":"error",
    "payload":{
        "message": "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."
    }
}

So the Canvas.js file has the issue that, while it's checking that data has a payload property, it never checks whether or not that payload property contains an error message.

Regardless, the real issue is this whole "cross-origin data" tainting the canvas. Any idea how to remedy this?

[conor-kelleher]

One last thing, sorry about my inconsistent line numberings. I just realised I was quoting the src version of app.js and the minimised version of Canvas.js. The line in the src version of Canvas.js that throws the error is 80

[conor-kelleher]

Anything? I've looked into the issue a bit since I posted this and I really think it's a bug in the Android code. I know some images have CORS permissions in place stopping cross-origin use of images from stealing IP but I can't find a single image that works on Android, meanwhile every image I've tried has worked fine on iOS. The getImageData function works fine on iOS but on Android, it refuses to complete because of the canvas being "tainted by cross-origin data". It's preventing any progress with my release

[iddan]

Sorry, missed that will look into it ASAP

[conor-kelleher]

Were you ever able to reproduce the issue? We're looking to release our app in the next few days. iOS is fully functional but we're just delaying the android release indefinitely...

[iddan]

Haven't got to it. Pretty busy and don't use feature at work so can't find time for it in the near future

[hu9osaez]

Any updates about this? A temporary fix? @ConorKelleher

[conor-kelleher]

None at all. I had to adopt a completely different approach for Android since this component was unusable for my purpose. I needed the function to get the pixel data of an image to manipulate it so I had to adapt the answer given here https://stackoverflow.com/questions/38098217/how-to-access-image-pixel-data-in-react-native to achieve that on Android. It's much slower and gives much less control over the quality of data to be read but it's a passable workaround.

[iddan]

Pull requests are very welcome and this feature shouldn't be a hassle to implement as the infra is available. Unfortunately I can't develop it myself right now but I can help contributors

[iddan]

We'll keep track on this at #41