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

Question

我正在为一个简单的应用程序开发离线模式，使用Indexeddb（作为库的PounchDB），我需要将图像转换为Base64或BLOB格式以便保存它。

我尝试了这段代码，它只适用于提供的图片，但我不知道为什么对于任何其他图片都不起作用：

function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        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);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}
convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64Img){
alert('it works');
      $('.output').find('img').attr('src', base64Img);  
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"> <img> </div>

它可以正常运行，但仅限于一个图像。如果我尝试使用其他图像，则无法正常工作。

- Stranger B.

---

尝试将 html 中的 img 元素转换为 Blob，然后再转换为 data URI？ - guest271314

我需要将图像URL转换为Base64。 - Stranger B.

是的。请参见下面的帖子；还可以查看https://dev59.com/1HE95IYBdhLWcg3wQ7mb。 - guest271314

@YasserB。感谢您提供的示例代码，对我的项目有所帮助。 - user1908391

Answer 1

您正在使用的图像具有CORS标头。

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

这就是为什么它可以在画布上进行修改的原因。
没有CORS头文件的其他图像受到同源策略的限制，无法以这种方式加载和修改。

- adeneo

---

谢谢你的回答，那么可能有什么解决方案呢？ - Stranger B.

如果图像来自不支持CORS的在线源，则必须在服务器端转换图像。 - adeneo

Answer 2

我需要将图像URL转换为Base64格式。

请参见： 了解HTML5 Canvas图像安全规则 浏览器Canvas跨域加载图像操作的CORS支持 为什么canvas.toDataURL()会抛出安全异常？

---

一种可能的解决方法是利用FileReader将img或其他html元素转换为html的data URI，而不仅仅是img的src。例如，在jsfiddle http://jsfiddle.net/guest271314/9mg5sf7o/上打开console，"右键单击"console上的data URI，选择"在新标签页中打开链接"。

var elem = $("div")[0].outerHTML;
var blob = new Blob([elem], {
    "type": "text/html"
});
var reader = new FileReader();
reader.onload = function (evt) {
    if (evt.target.readyState === 2) {
        console.log(
                     // full data-uri
                     evt.target.result
                     // base64 portion of data-uri
                   , evt.target.result.slice(22, evt.target.result.length));
        // window.open(evt.target.result)
    };
};
reader.readAsDataURL(blob);

---

另一个可能的解决方法是在新标签页中打开图像，使用window；或者使用embed或iframe元素；利用XMLHttpRequest返回Blob，将Blob转换为data 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();

- guest271314

Answer 3

你需要类似这样的东西吗？

http://www.w3docs.com/tools/image-base64

- Hazarapet Tunanyan

---

是的，差不多，但我需要将一个来自URL的图像转换为Base64。 - Stranger B.

你需要工具（带有URL）还是想自己编写代码来完成？ - Hazarapet Tunanyan

我知道解决方案，但需要使用Node.js。用JavaScript可能做不到。 - Hazarapet Tunanyan

我不在乎，我可以使用任何库。 - Stranger B.