CORS error for adding image from another domain in jsPDF in Angular 8

Question

I want to use some images in jsPdf. These images come from another domain (API). This is my code:

let img = new Image();
img.src = 'myUrl';
docPdf.addImage(img, 'JPEG', col, row, width, height, 'FAST');

But I receive this error:

Access to image at 'http://127.0.0.1:8000/some-url' from origin 'http://127.0.0.1:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
at Object.x.convertStringToImageData (jspdf.min.js:50)

Then I add crossOrigin to my url but I also receive that error.

img.crossOrigin = 'anonymous';

or img.crossOrigin = 'Anonymous';

I also set cors settings in backend:

CORS_ORIGIN_ALLOW_ALL = True

Felipe de Alvarenga Leite · Accepted Answer · 2021-03-01 17:12:07Z

10

If your backend is already accepting all origins, and you are setting img.crossOrigin = 'anonymous', you could try adding a random parameter to your image URL:

img.src = imgUrl + '?r=' + Math.floor(Math.random()*100000);

It looks like the browser already has your image cached, but it won't let any javascript read it from the disk. Adding a random param to the imageURL, it will miss the browser cached image and download it again from the server.

answered Mar 1, 2021 at 17:12

Felipe de Alvarenga Leite

1861 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlexTemina Over a year ago

You saved me. Thanks.

Reinier68 · Accepted Answer · 2020-02-22 16:19:23Z

1

For clarification I created a codesandbox.

I usually add my images as base64encoded dataurls. If images are from a different domain (like when you stored the link to the picture in your db), I convert the picture to baset64 client side with the following method:

toDataURL(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
          callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      xhr.open("GET", url);
      xhr.responseType = "blob";
      xhr.send();
    },

In the created() method (or just when you need the image to be converted to base64), you can set a url property that's declared in the data obj:

created() {
    this.toDataURL(this.imgUrl, data => {
      this.imgAsBase64 = data;
    });
  }

Then simply add the image:

doc.addImage(this.imgAsBase64, "jpg", 10, 10);

And ur done.

answered Feb 22, 2020 at 16:19

Reinier68

3,4344 gold badges39 silver badges68 bronze badges

1 Comment

Ali Over a year ago

I searched about this situation, and found that browsers do not allow it. It means that, I must create the pdf in back-end, and then return it to front-end. Any way, Thanks for your response.

Collectives™ on Stack Overflow

CORS error for adding image from another domain in jsPDF in Angular 8

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related