在Javascript/Jquery中将URL图像转换为Base64或Blob的简单方法

我正在为一个简单的应用程序使用脱机模式，并且我正在使用Indexeddb（PoundchDB作为库），我需要将图像转换为Base64或BLOB才能保存它

我尝试过这段代码，它只适用于一个图像（提供的图像），我不知道为什么它不适用于任何其他图像：

函数convertImgToBase64URL（url、回调、outputFormat）{
var img=新图像（）；
img.crossOrigin='匿名'；
img.onload=函数（）{
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'），dataURL；
canvas.height=img.height；
canvas.width=img.width；
ctx.drawImage（img，0,0）；
dataURL=canvas.toDataURL（outputFormat）；
回调（dataURL）；
canvas=null；
};
img.src=url；
}
convertImgToBase64URL（'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png，函数（base64Img）{
警报（“它工作”）；
$（'.output'）.find（'img'）.attr（'src'，base64Img）；
});
您正在使用的图像具有CORS标题

Accept-Ranges : bytes
Access-Control-Allow-Origin : * // this one
Age : 69702
Connection : keep-alive

这就是为什么它可以在这样的画布中修改。

其他没有CORS标题的图像受限制，不能以这种方式在画布中加载和修改。
您需要类似的内容吗


我需要将图像URL转换为Base64

看





一种可能的解决方法是利用
FileReader
将
img
或其他
html
元素转换为
html
的
数据URI
，而不仅仅是
img
src
；i、 例如，尝试在jsfiddle打开
控制台
，在
控制台
右键单击
数据URI
，选择“在新选项卡中打开链接”


另一种可能的解决方法是在新选项卡中打开图像，
窗口
；或者，
嵌入
，或
iframe
元素；利用返回
Blob
，将
Blob
转换为
数据URI

var xhr = new XMLHttpRequest();
// load `document` from `cache`
xhr.open("GET", "", true); 
xhr.responseType = "blob";
xhr.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        var reader = new FileReader();
        reader.onload = function(e) {
            // `data-uri`
            console.log(e.target.result);
        };
        reader.readAsDataURL(this.response);        
    };
};
xhr.send();

感谢您的回答，那么可能的解决方案是什么？如果图像来自不支持CORS的在线源，您必须在服务器端转换图像。尝试将
html
img
元素转换为
Blob
，然后转换为
数据URI
？我需要将图像URL转换为Base64Yes。见下文；另见@YasserB。感谢您提供的示例代码，帮助我完成了一个项目。是的，完全一样，但我需要将图像从URL转换为Base64。你需要工具（带有URL）还是你想自己做（代码）？我知道解决方案，但使用NodeJs。使用javascript我想你做不到。我不在乎，我可以使用任何库
var xhr = new XMLHttpRequest();
// load `document` from `cache`
xhr.open("GET", "", true); 
xhr.responseType = "blob";
xhr.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        var reader = new FileReader();
        reader.onload = function(e) {
            // `data-uri`
            console.log(e.target.result);
        };
        reader.readAsDataURL(this.response);        
    };
};
xhr.send();