Node-vibrant: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

Created on 17 Mar 2019  ·  5Comments  ·  Source: Vibrant-Colors/node-vibrant

version 3.1.0 and up.
at version 3.0.0 it doesn't happen.
stack trace:
SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Error: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at BrowserImage.getImageData (browser.js?cf4e:105)
at BrowserImage.ImageBase.applyFilter (base.js?de7c:22)
at Vibrant._process (vibrant.js?b6c6:22)
...

bug investigation

Most helpful comment

Hey y'all - sorry about radio silence for a second or three. Been having a LOT go on lately for myself. I'm still about two weeks from being able to work on this issue (and fix up some other bugs super heavily), but I'll go over some of the stuff pertaining to crossOrigin that I can think of off the top of my head to try and help if anyone else is looking into it (we love PRs and help investigating! ♥)

The code in question was added with #61, which eventually was moved into #81 in commit ed21a58fda54774590da729d1a47e2b0b6f5a3a8. I'll have to look into this merge a bit more to make sure that data is being pulled properly, and that crossOrigin is remaining properly set in lifecycle, etc.

All 5 comments

I'm facing the same issue

I just got this error today as well. Not sure what set it off since I didn't update anything.
I found some answer on stackoverflow but I think it would require some under the hood changes to the library. I'm not exactly sure how to fix it in the mean time.

@Shannor It looks like that is already in the code base. I'm not sure how to fix this either, wondering if it's an issue with where the images are being served from and not this library itself, because a project I'm working on I get this issue intermittently. https://github.com/akfish/node-vibrant/blob/178f6afad09717e22613068a9229fe169b3c3228/src/image/browser.ts#L52

Currently my images are coming from Google Cloud buckets. Though I assume everyone is using some time of cloud hosting service at this point (AWS, Azure, etc). It could be a browser change that's effecting it, as I saw this bug on some other repos that do what node-vibrant does or is similar. I'll keep on the lookout and link anything I find with new information.

Hey y'all - sorry about radio silence for a second or three. Been having a LOT go on lately for myself. I'm still about two weeks from being able to work on this issue (and fix up some other bugs super heavily), but I'll go over some of the stuff pertaining to crossOrigin that I can think of off the top of my head to try and help if anyone else is looking into it (we love PRs and help investigating! ♥)

The code in question was added with #61, which eventually was moved into #81 in commit ed21a58fda54774590da729d1a47e2b0b6f5a3a8. I'll have to look into this merge a bit more to make sure that data is being pulled properly, and that crossOrigin is remaining properly set in lifecycle, etc.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Kikobeats picture Kikobeats  ·  9Comments

catusmagnus picture catusmagnus  ·  5Comments

glomotion picture glomotion  ·  5Comments

lucafaggianelli picture lucafaggianelli  ·  9Comments

inbarshani picture inbarshani  ·  4Comments