js 图片url转base64

// 将图片 URL 转换为 Base64 编码的示例代码

function urlToBase64(url) {
    return new Promise((resolve, reject) => {
        // 创建一个图片对象
        const img = new Image();
        // 设置跨域属性，确保可以加载外部资源
        img.setAttribute('crossOrigin', 'anonymous');
        img.onload = () => {
            // 创建一个 canvas 元素
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 设置 canvas 的宽度和高度与图片一致
            canvas.width = img.width;
            canvas.height = img.height;
            // 将图片绘制到 canvas 上
            ctx.drawImage(img, 0, 0);
            // 将 canvas 内容转换为 Base64 编码的 Data URL
            const dataURL = canvas.toDataURL('image/png');
            resolve(dataURL);
        };
        img.onerror = (error) => {
            reject(error);
        };
        // 设置图片的 src 属性为传入的 URL
        img.src = url;
    });
}

// 使用示例
urlToBase64('https://example.com/image.png')
    .then(base64 => console.log(base64))
    .catch(error => console.error('Error:', error));

解释说明：

1. 创建图片对象：我们创建了一个 Image 对象，并设置了 crossOrigin 属性以处理跨域问题。
2. 加载图片：当图片加载完成时，触发 img.onload 事件。
3. 创建 Canvas：创建一个 canvas 元素，并将其宽度和高度设置为图片的尺寸。
4. 绘制图片到 Canvas：使用 drawImage 方法将图片绘制到 canvas 上。
5. 转换为 Base64：调用 canvas.toDataURL 方法将 canvas 内容转换为 Base64 编码的 Data URL。
6. 返回结果：通过 Promise 返回 Base64 编码的结果。

这个函数可以将任何图片 URL 转换为 Base64 编码的字符串。