Js同步加载图片资源

最新推荐文章于 2023-06-19 14:52:30 发布

原创最新推荐文章于 2023-06-19 14:52:30 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种将网络图片转换为Base64编码的方法，使用JavaScript实现，适用于跨域请求，通过创建canvas元素绘制图片并获取其Base64编码。

//用法
await img2base64("https://cdn-corner.resource.buzzbuzzenglish.com/qr-code.svg", 'anonymous');

//封装的方法
export const img2base64 = async (url, crossOrigin) => {
    return new Promise(resolve => {
        const img = new Image();

        img.onload = () => {
            const c = document.createElement('canvas');

            c.width = img.naturalWidth;
            c.height = img.naturalHeight;

            const cxt = c.getContext('2d');

            cxt.drawImage(img, 0, 0);
            // 得到图片的base64编码数据
            resolve(c.toDataURL('image/png'));
        };

        crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
        img.src = url;
    });
};