圖片轉成base64 跨域等安全限制及解決方案

 把其他域的圖片在canvas中轉換為base64時，會遇到跨域安全限制。

目前，唯一可行的方案是，把圖片文件以arraybuffer的形式ajax下載下來，然后直接轉base4。

但是，這樣有個毛病，就是可能會浪費帶寬，多下載一次。

/*    var getBase64ByUrl = function(src, callback, outputFormat) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0); //默認圖片文件的原始size 縮小base串需加第4、5個參數
            alert(5)
            try{
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            } catch(e) { alert(e.name + ": " + e.message);
                alert(JSON.stringify(e));
            }
            dataURL =dataURL.replace("data:image/png;base64,", "");
            //dataURL =encodeURIComponent(dataURL);
            alert(dataURL);
            callback(dataURL);
            canvas = null;
        };
        img.src = src;alert(6.5)
    }*/

var getBase64ByUrl = function(src, callback, outputFormat) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', src, true);

      xhr.responseType = 'arraybuffer';

      xhr.onload = function(e) {
        if (xhr.status == 200) {
          var uInt8Array = new Uint8Array(xhr.response);
          var i = uInt8Array.length;
          var binaryString = new Array(i);
          while (i--) {
            binaryString[i] = String.fromCharCode(uInt8Array[i]);
          }
          var data = binaryString.join('');
          var base64 = window.btoa(data);
          var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
          alert(dataUrl)
          callback.call(this, dataUrl);
        }
      };

      xhr.send();
    }

 

參考

http://stackoverflow.com/questions/22783368/android-browser-only-canvas-todataurl-throws-uncaught-error-securityerror-dom