fix img cors error All In One
fix img cors error All In One
function imageReceived() {
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
canvas.width = downloadedImg.width;
canvas.height = downloadedImg.height;
context.drawImage(downloadedImg, 0, 0);
imageBox.appendChild(canvas);
try {
localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
}
catch(err) {
console.log("Error: " + err);
}
}
crossorigin="anonymous"
<img src="https://img2020.cnblogs.com/blog/740516/202201/740516-20220103215619757-6980613.png" crossorigin="anonymous">
<img src="https://cdn.xgqfrms.xyz/css-effects-all-in-one/images/before.png" crossorigin="anonymous">
solution
function loadImgAsBase64(url, callback) {
let canvas = document.createElement('CANVAS');
let img = document.createElement('img');
//img.setAttribute('crossorigin', 'anonymous');
img.src = url;
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL('image/png');
canvas = null;
callback(dataURL);
};
}
let url = 'http://lorempixel.com/500/150/sports/9/';
this.loadImgAsBase64(url, (dataURL) => {
msg.innerText = dataURL.slice(0,50)+'...';
});
demo
https://www.cnblogs.com/xgqfrms/p/13337924.html
https://codepen.io/xgqfrms/pen/wvMQqZL
refs
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15760742.html
未经授权禁止转载,违者必究!