在Javascript / Jquery中将URL映像转换为Base64或Blob的简便方法
我正在为一个简单的应用程序工作离线模式，我正在使用Indexeddb（PounchDB作为库），我需要将Image转换为Base64或BLOB才能保存它。
我试过这个代码只适用于一个Image（提供的图像）我不知道为什么它不适用于任何其他图像：
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://sofzh.miximages.com/javascript/Logo_2013_Google.png', function(base64Img){ alert('it works'); $('.output').find('img').attr('src', base64Img); }); ![]()
它工作正常，但只有一个图像，如果我尝试任何其他图像，它不起作用
您正在使用的图像具有CORS标头
Accept-Ranges : bytes Access-Control-Allow-Origin : * // this one Age : 69702 Connection : keep-alive
这就是为什么它可以在这样的canvas中修改。
其他没有CORS标头的图像受同源策略的约束，无法以这种方式在canvas中加载和修改。
我需要将Image URL转换为Base64
看到
了解HTML5 Canvas图像安全规则
浏览器canvasCORS支持跨域加载图像处理
为什么canvas.toDataURL（）会抛出安全exception？
一种可能的解决方法是利用FileReader将img或其他html元素转换为html的data URI ，而不仅仅是img src ; ieg，尝试在jsfiddle打开console http://jsfiddle.net/guest271314/9mg5sf7o/ ，在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();
你需要这样的东西吗？