Question

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

Posted January 20, 2018 3k views
DigitalOceanUbuntu 16.04

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

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.

×
2 answers

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
                          });
Submit an Answer