js 图片转base64

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

function imgToBase64(url, callback) {
    // 创建一个 image 对象
    var img = new Image();

    // 设置跨域属性，确保可以加载外部资源
    img.crossOrigin = 'Anonymous';

    // 图片加载完成后的处理函数
    img.onload = function() {
        // 创建一个 canvas 元素
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        // 设置 canvas 的宽度和高度与图片一致
        canvas.width = img.width;
        canvas.height = img.height;

        // 将图片绘制到 canvas 上
        ctx.drawImage(img, 0, 0);

        // 将 canvas 内容转换为 base64 编码的字符串
        var dataURL = canvas.toDataURL('image/png'); // 可以指定其他格式如 'image/jpeg'

        // 调用回调函数并将 base64 字符串传递给它
        callback(dataURL);
    };

    // 加载图片
    img.src = url;
}

// 使用示例
imgToBase64('https://example.com/path/to/image.jpg', function(base64Img) {
    console.log(base64Img); // 输出 base64 编码的图片字符串
});

解释说明：

1. 创建 Image 对象：我们首先创建一个 Image 对象来加载图片。
2. 设置 crossOrigin 属性：为了确保可以加载跨域的图片资源，设置了 crossOrigin 属性为 'Anonymous'。
3. 图片加载完成后处理：当图片加载完成后，使用 canvas 来绘制图片，并将 canvas 的内容转换为 Base64 编码的字符串。
4. 回调函数：通过回调函数将生成的 Base64 字符串返回给调用者。

你可以根据需要修改图片的 URL 或者调整输出的图片格式。