Question

not able to convert image to base64, saying cors issue ( digital ocean spaces )

I have a digital ocean spaces account, and image files are stored, In my website i am showing all images, i want user to download all images, So i am using jspdf to put all images in pdf… but jspdf requires image in base64 format. when i convert image to base64 using below function, it gives error.

getBase64Image(img) {
    var canvas = <HTMLCanvasElement>document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/jpeg");
    return dataURL;
  }
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

after this i have added crossorigin="anonymous" in img tag, then it gives this error

Access to Image at
 'https://static-images.ams3.digitaloceanspaces.com/1515994270213-SplitShire-8098-1800x1200-1%20copy.jpg' 
from origin 'http://localhost:4200' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4200' is therefore not allowed access.

after uploaded to server, still error was same

Access to Image at 
'https://static-images.ams3.digitaloceanspaces.com/1515994270213-SplitShire-8098-1800x1200-1%20copy.jpg' 
from origin 'http://mydomain.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://mydomain.com' is therefore not allowed access.

i have also changes the setting in my digital ocean spaces settings, but nothing works

1

Origin - *
Allowed Method- GET,PUT,DELETE,POST
Access Control Max Age- 600

2

Origin - mydomain.com
Allowed Method- GET,PUT,DELETE,POST
Access Control Max Age- 600
Subscribe
Share

Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

I have this problem, but I able to fix it by changing ctx.drawImage to fabric.Image.fromURL

Example :

 fabric.Image.fromURL("YOUR URL HERE", function(img) {
                            img.setWidth(400);
                            canvas.add(img).renderAll();
                          }, {
                            crossOrigin: 'Anonymous',
                            left: 0,
                            top: 0,
                            hasBorders: false,
                            hasControls: false,
                            hasRotatingPoint: false,
                            lockMovementX: true,
                            lockMovementY: true
                          });

I have de same problem :(