javascript - Canvas 已通过本地 chrome ://extension URL 被跨源数据污染

Question

我正在开发 google chrome 扩展程序，我正在尝试将与扩展程序捆绑在一起的图像加载到 Canvas 中。

var canvas = document.createElement('canvas');
canvas.width = 470;
canvas.height = 470;
var context = canvas.getContext('2d');
var image = new Image();
image.addEventListener('load', function(){
     //process
});
image.src = chrome.extension.getURL("asset/gotcha.png");

当我在内容脚本中执行代码时，我得到:

Unable to get image data from canvas because the canvas has been  tainted by 
cross-origin data.

有没有办法避免这种情况？我已经成功地将图像、音频、视频和 Flash 直接嵌入到目标站点中，没有出现任何这些问题。该资源列在 list 文件中的 web_accessible_resources 下。

Answer 1

基于 ExpertSystem's approach我有一个简单的解决方案。

后台页面 JavaScript 的第一部分，可以在其中创建 Canvas 而不会引发安全异常。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == "convert_image_url_to_data_url") {
      var canvas = document.createElement("canvas");
      var img = new Image();
      img.addEventListener("load", function() {
        canvas.getContext("2d").drawImage(img, 0, 0);
        sendResponse({data: canvas.toDataURL()}); 
      });
      img.src = request.url;
      return true; // Required for async sendResponse()
    }
  }
)

内容脚本的第二部分:

//@success is the callback
function local_url_to_data_url(url, success) {  
  chrome.runtime.sendMessage(
    {message: "convert_image_url_to_data_url", url: url}, 
    function(response) {success(response.data)}
  );    
}