js、vue图片链接转成base64

最新推荐文章于 2024-07-29 14:17:59 发布

月影星云

最新推荐文章于 2024-07-29 14:17:59 发布

阅读量1.2k

点赞数

分类专栏： js vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/yyxy_gis/article/details/120841175

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1、创建imgUrlToBase64.js文件

imgUrlToBase64.js

2、封装代码如下

export let imgUrlToBase64 = function(imgUrl){
	let base64Url = "";
	let image = new Image();
    image.setAttribute("crossOrigin", "anonymous");//解决跨域问题
    image.src = imgUrl;
    image.onload = function() {//image.onload为异步加载
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        //这里的base64Url就是base64类型
        //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
        base64Url = canvas.toDataURL("image/jpeg", 1);
    }
	return base64Url;
}