JS将图片url转换base64，解决阿里云oss跨域问题
一，js代码，传入图片url
function drawBase64Image (img) {
var canvas = document.createElement(canvas);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext(2d);
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL(image/);
return dataURL;
}
二，js调用
var imgUrl = https://xxxxx/xxx.png;
let image = new Image();
image.src = imgUrl + "?v=" + Math.random(); // 防止缓存，必填
image.crossOrigin = *; // 解决前端跨域问题
image.onload = function(){
var base64 = drawBase64Image(image);
console.log(base64);
}
此时网络图片仍然存在跨域问题
三，阿里云oss跨域设置
Bucket 列表选择对应图片存储位置，多处则每个bucket都需要设置
ETag x-oss-request-id
以下配置为通用配置，具体规则可查看阿里云发布的跨域设置
