JS图片url地址转base64图片编码

原创已于 2024-04-23 13:37:21 修改 · 2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被收录于：

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2023-12-29 10:28:01 首次发布

该文章详细描述了一个函数，如何利用HTML5CanvasAPI将网络图片转换成Base64格式，以便于在JavaScript中进行数据传输或存储。

convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
　　ctx = canvas.getContext('2d'),
　　img = new Image;
　　img.crossOrigin = 'Anonymous';
　　img.onload = function(){
    　　canvas.height = img.height;
    　　canvas.width = img.width;
    　　ctx.drawImage(img,0,0);
    　　var dataURL = canvas.toDataURL(outputFormat || 'image/jpg');
    　　callback.call(this, dataURL);
    　　canvas = null; 
    };
　　img.src = url;
} 
//参考链接
let url = "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
convertImgToBase64(url,(base64Img)=>{
	alert(base64Img)//转化后的base64文件
})

标签

#javascript #vue.js