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!
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
});
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.