背景
1、后台返回的图片是华为云上的图片资源URL地址,前端放在el-image标签上,可以正常预览,但是后续对图片进行操作,通过canvas绘制新图片,会报跨域,导致绘制的新图片空白。
2、后台无法将响应头:access-control-allow-origin 改为 *
function convertImageUrlToBase64(url) {
return fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
}));
}
// 使用示例
const imageUrl = 'https://example.com/image.jpg';
convertImageUrlToBase64(imageUrl)
.then(base64String => {
console.log('Base64 image:', base64String);
// 在页面上显示图片
const imgElement = document.createElement('img');
imgElement.src = base64String;
document.body.appendChild(imgElement);
})
.catch(error => {
console.error('Error converting image:', error);
});