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都需要设置
来源何允许Headers:*
允许Methods:可以全选或者指定请求方式
暴露 Headers
ETag
x-oss-request-id
以下配置为通用配置,具体规则可查看阿里云发布的跨域设置