Report this

What is the reason for this report?

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

Posted on January 20, 2018

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


This textbox defaults to using Markdown to format your 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 de same problem :(

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
                          });

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.