仅限 Android 浏览器：canvas.toDataURL 抛出未捕获错误：SecurityError: DOM Exception 18答案

【问题标题】：Android Browser only: canvas.toDataURL throws Uncaught Error: SecurityError: DOM Exception 18仅限 Android 浏览器：canvas.toDataURL 抛出未捕获错误：SecurityError: DOM Exception 18
【发布时间】：2014-05-12 01:53:05
【问题描述】：

我正在尝试将图像转换为 base64 字符串并将其作为源放入 img 标签中。图片存储在另一个子域中，然后是脚本。所以我把它放在我的 .htaccess 文件中以确保允许访问

<ifModule mod_headers.c>
  Header set Access-Control-Allow-Origin http://xxx.mydomain.com
  Header set Access-Control-Allow-Credentials true
</ifModule>

它在桌面浏览器、iOS 上的 Safari 和 Android 上的 Chrome 上运行良好。但不是在 Android 的原生浏览器中。我在控制台中得到的只是

Uncaught Error: SecurityError: DOM Exception 18

知道为什么它可以在所有浏览器上运行，但不能在 android 上运行吗？这是我的脚本

function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/jpg');
        callback.call(this, dataURL);
        canvas = null;
    };
    img.crossOrigin = 'anonymous';
    img.src = url;
}

var imgString;

if (localStorage.getItem('xxxItemNamexxx')) {
    imgString = localStorage.getItem('xxxItemNamexxx');
} else {
    convertImgToBase64($('#my-picture').attr('src'), function(base64Img) {
        imgString = base64Img;
        localStorage.setItem('xxxItemNamexxx', base64Img);
    });
}

$('#my-picture').attr('src', imgString);

感谢您的任何意见！

【问题讨论】：

标签： javascript html canvas cross-domain android-browser

【解决方案1】：

我在 android 中遇到了类似的问题，this answer 提供了帮助。

function convertImgToBase64(url, callback, outputFormat){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, 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;
      callback.call(this, dataUrl);
    }
  };

  xhr.send();
}

【讨论】：