using other origin image in css occurs error - cannot fetch resource

[alex-kowalski]

Hello This dom-to-image is good library for screen shot web pages. But it has some issues for cross origin.

I am using toPng function as below:

var previewFrame = $('#iframe1').contents();
var previewWin = previewFrame[0].defaultView;

var domforImage = previewFrame.find('body')[0];
previewWin.domtoimage.toPng(domforImage).then(function (dataUrl) {

    console.log(dataUrl);

})
.catch(function(e) {
    console.error('error: ', e);
});

This is for screen shot of iframe and this works well in normal. But for cross origin image urls in css occurs console error. (I use Chrome)

.div1 {
    background-image: url('http://example.com/images/general/default_image.png');
}

Console error is as below.

Failed to load http://example.com/images/general/default_image.png: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example1.com' is therefore not allowed access.

dom-to-image.js:519 cannot fetch resource: http://example.com/images/general/default_image.png, status: 0

How can I fix this.

--------------------- Additional ----------------- Even there is more serious problem. It is caught with error. This is error when caught.

save_preview.js?ver=1521105805:173 error: Event {isTrusted: true, type: "error", target: img.elIMG.ximg, currentTarget: img.elIMG.ximg, eventPhase: 2, …}

And image not created. This is some serious. How can I fix this. Please let me know.

Thanks

[alex-kowalski]

Hello

Maybe any news?

[timbilalov]

It's all about CORS... External server doesn't set right headers, and XHR can't resolve this external image as Blob (and base64 then). I tried even use "fetch" instead of XHR, but got an "opaque" response - nor error nor image.

So it's not the problem of dom-to-image.js itself, i think. Proof (try this image): https://theme.zdassets.com/theme_assets/261010/0d0f04d045b80bfc06b82fd855d0e61fac6470d4.png

If possible, save external image locally (also, it's an advantage for you, in situations then something happened with external server)

[alex-kowalski]

Thanks for your response. Now in my situation, i can't save image locally. (I think maybe this is normal situation for development.) Maybe is there any other solution? Really we can't do anything for this problem with dom-to-image?

[timbilalov]

Dunno :) I'm not a contributor.

Try to work with non-minified library, look for strings with XHR, and play around it. Maybe it's possible to get image URL from CSS, create an <img> tag with this URL, and read it as Blob. But i'm not sure about it.

[alex-kowalski]

Thanks, timbilalov

[EdoAPP]

@alex-kowalski , could you solved your problem? I'm having the same issue with an specific Leaflet Map Layer

[alex-kowalski]

@EdoAPP , not yet, still issue there.

[aldrin431]

I solved the issue first transforming image link to base64

[eachmawzw]

We can use an open reverse proxy like https://cors-anywhere.herokuapp.com/， See https://stackoverflow.com/questions/42382095/getting-around-cors-issue-with-convert-url-image-to-binary I wrote a configuration for accessing images through the proxy, which was tested to be available. I submitted a PR here https://github.com/tsayen/dom-to-image/pull/329

[eachmawzw]

Then how to use: domtoimage.toBlob(dom, { corsImg: { url: 'https://cors-anywhere.herokuapp.com/#{cors}' } });