js img转base64

function imgToBase64(url, callback) {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.crossOrigin = 'Anonymous';  // 解决跨域问题
    img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');  // 将图片转为base64格式
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

// 使用示例
imgToBase64('https://example.com/image.jpg', function(base64Img) {
    console.log(base64Img);  // 输出转换后的base64字符串
});

解释说明：

1. 创建Canvas元素：我们首先创建一个<canvas>元素，用于绘制图像。
2. 设置跨域属性：通过设置img.crossOrigin = 'Anonymous'，可以解决图片加载时的跨域问题。
3. 加载图片：使用new Image()创建一个新的图片对象，并设置其src属性为要转换的图片URL。
4. 绘制图片到Canvas：当图片加载完成后，在Canvas上绘制该图片。
5. 转换为Base64：使用canvas.toDataURL('image/png')将Canvas上的内容转换为Base64编码的字符串。
6. 回调函数：将生成的Base64字符串传递给回调函数进行处理。