图片转base64方法封装

最新推荐文章于 2025-03-27 16:22:03 发布

原创最新推荐文章于 2025-03-27 16:22:03 发布 · 410 阅读

0 ·

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

标签

#javascript #前端 #html5

这段代码展示了如何将图片文件或URL转换为Base64编码。对于字符串类型的图片URL，它创建一个带有跨域属性的Image对象并加载图片，然后绘制到canvas上并转换为Base64。对于文件对象，它使用FileReader读取并转换为Base64。最后，通过Promise处理成功和错误回调。

imageToBase64.js

export function getBase64(file) {
    if (typeof (file) == "string") {
        //图片url
        return new Promise((resolve, reject) => {
            //一定要设置为let，不然图片不显示
            let image = new Image();

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

            image.onerror = function (error) {
                console.log("Error: ", error);
                reject(error)
            };
        })

    } else {
        //图片文件
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.readAsDataURL(file); // 一定要传入file格式
            reader.onload = () => {
                // console.log("file 转 base64结果：" + reader.result);
                resolve(reader.result)
            };
            reader.onerror = function (error) {
                reject(error)
            };
        })
    }
}


export default { getBase64 }

使用
引入使用即可


import { getBase64 } from "@/utils/imageToBase64"

使用

/** file:图片文件或图片链接*/
getBase64(file).then(res=>){
  console.log("base64",res)
}