chrisben / imgcache.js

JS library based on the File API to cache images for offline recovery (target: cordova/phonegap & chrome)
Other
826 stars 216 forks source link

Unable to cache generated img on Chrome #220

Closed jeroenman closed 7 years ago

jeroenman commented 7 years ago

I'm using Pixi to turn a renderTexture into an img element and now I want to cache that img src, but I'm having a bit of trouble.

This is the code I use:

var image = renderer.extract.image(); 
ImgCache.cacheFile(image.src);

(I left out the argument at renderer.extract.image() for simplicity, would normally be a renderTexture. You just get a big texture the size of the canvas now)

And this is the error I get:

"Refused to connect to 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABykAAAWeCAYAAADUrBkfAAAgAElEQ…YBkXLlNkaAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQDeXBZ8AZnYmAAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "default-src *". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback."

After that I get "ERROR: XHR error - Image" followed by the giant src string. and then "ERROR: Download error target: /imgcache/b32634d30acdf4d3e1756d3310bf1e5259df40dc" and "ERROR: Download error code: 0"

I don't think the Content Security Policy is really the problem. This code works in iOS and when I cache an excisting image, it also works in Chrome. Why does Chrome not like a generated src?

extra info: I'm using ImgCache version 1.2.0, use only the options as they are described in the setup, using Pixi and running on Chrome

jeroenman commented 7 years ago

Just tried ImgCache.options.useDataURI = true;

But I'm still seeing the same result.

adrianmarinica commented 7 years ago

Can you try something like this:

var base64 = renderer.extract.base64(target); 
ImgCache.cacheFile(base64);

Together with

ImgCache.options.useDataURI = true;

jeroenman commented 7 years ago

Thanks for your response, but still no luck:(

jeroenman commented 7 years ago

Woooh!! This did just work to fix a problem I had on iOS.

A cached img url just didn't want to load as texture, spent hours tracking down permission issues but this base64 solution just fixed it. I still don't get it working on chrome, but iOS is way more important to me anyway.

Thanks!

adrianmarinica commented 7 years ago

Hey, I am glad I was able to help. Should we close this issue? I am not sure if it is an issue with imgcache itself.