回调函数写法(这种写法不好,嵌套太多)。
测试图片转换<script>
function imageUrl2Base64(url, callback) {
if(url) {
let image = new Image();
//解决跨域报错,必须写在赋值给image.src的前面,否则偶尔报错,也可以这样写image.setAttribute('crossOrigin', 'anonymous');
image.crossOrigin = 'anonymous';
image.src = url;
//等待图片加载完成,转换图片为base64,异步
image.onload = function() {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);
let base64 = canvas.toDataURL('image/png');
callback(base64)
}
}
}
var url = 'https://zxximage.oss-cn-shenzhen.aliyuncs.com/202002/55ab6298d256a340_c32ce80bb960434da9a733b11e4c66be.jpeg';
imageUrl2Base64(url, function(base64) {
document.getElementById('test').src = base64;
});
</script>
改写之后(推荐写法)。
测试图片转换<script>
function imageUrl2Base64(url) {
return new Promise((resolve, reject) => {
if(url) {
let image = new Image();
//解决跨域报错,必须写在赋值给image.src的前面,否则偶尔报错,也可以这样写image.setAttribute('crossOrigin', 'anonymous');
image.crossOrigin = 'anonymous';
image.src = url;
//等待图片加载完成,转换图片为base64,异步
image.onload = function() {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);
let base64 = canvas.toDataURL('image/png');
resolve(base64);
}
}
});
}
var url = 'https://zxximage.oss-cn-shenzhen.aliyuncs.com/202002/55ab6298d256a340_c32ce80bb960434da9a733b11e4c66be.jpeg';
imageUrl2Base64(url).then((base64) => {
document.getElementById('test').src = base64;
});
</script>