javascript - 在 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>

它工作正常，但只有一个图像，如果我尝试任何其他图像它不起作用

Answer 1

您正在使用的图像具有 CORS header

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

这就是为什么它可以像那样在 Canvas 中修改。
其他没有 CORS header 的图像受 same-origin policy 约束。 ，并且不能以这种方式在 Canvas 中加载和修改。