我正在开发 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 下。
最佳答案
基于 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)}
);
}
关于javascript - Canvas 已通过本地 chrome ://extension URL 被跨源数据污染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19894948/