"dom-to-image" the picture Cross domain

Question

If images are not a local file, it's will have an error like below:

Error

This is dom-to-image in VUE:

shareClick(){
   this.shareLoading = true;
   let capture = document.getElementById("capture");

   domToImage.toBlob(document.getElementById('capture')).then((blob)=>{
       var img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () =>{
          img.src = dataUrl;
          capture.innerHTML = '';
          capture.appendChild(img);
          this.shareLog = false;
          this.shareLoading = false;
        }
    })
 },
//domToImage CODE end

'dom-to-image' in github https://github.com/tsayen/dom-to-image — 于斯日古楞, Apr 04 '19 at 09:45
There is no "Access-Control-Allow-Origin" header sent as part of the remote server's response, causing your script to block it. If you have access to the remote server, add the appropriate `Access-Control-Allow-Origin: *` [header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) (or restrict it to your server instead of "*"). — SaschaM78, Apr 04 '19 at 09:52
Good morning. Did that solve your problem? If so, really glad to hear and could I write a short answer so you can mark it as solution? Thanks! — SaschaM78, Apr 08 '19 at 05:58

SaschaM78 · Answer 1 · 2019-04-15T09:36:04.300

The problem occurred due to a missing Access-Control-Allow-Origin: * header on the remote server, causing the AJAX call to block the request.

If you have access to the remote server, you may add the missing header (which was what the author did). The other alternative would be to use JSONP (if supported) to fetch the remote image and pass the retrieved data via callback to img.src.

The last option would be to use a CORS proxy to fetch data from a server not allowing cross-script access via another server that does allow cross-script access. A very good overview can be found in this Stack Overflow Q&A.

"dom-to-image" the picture Cross domain

1 Answers1