您不能直接将图像从扩展程序传递到网页的画布而不使其受到污染。
这是一种解决方法:
描述:
- 您从背景页面(或内容脚本)访问图像。
- 您将其放在画布中并将其转换为 dataURL。
- 您将一些 JS 代码注入网页,将 dataURL 作为字符串传递。
- 注入的代码使用字符串 (dataURL) 创建图像(在网页的上下文中)并将其绘制到画布上。
示例代码:
/* In `background.js` */
function injectImg(tabID, remoteCanvasID, imgPath) {
var canvas = document.createElement("canvas");
var img = new Image();
img.addEventListener("load", function() {
canvas.getContext("2d").drawImage(img, 0, 0);
var dataURL = canvas.toDataURL();
var code = [
"(function() {",
" var canvas = document.getElementById(\"" + remoteCanvasID + "\");",
" var img = new Image();",
" img.addEventListener(\"load\", function() {",
" canvas.getContext(\"2d\").drawImage(img, 0, 0);",
" });",
" img.src = \"" + dataURL + "\";",
" ",
"})();"].join("\n");
chrome.tabs.executeScript(tabID, { code: code });
});
img.src = chrome.extension.getURL(imgPath);
}
chrome.runtime.onMessage.addListener(function(msg, sender)) {
if (msg.action && (msg.action == "getImg")
&& msg.imgPath && msg.canvasID) {
injectImg(sender.tab.id, msg.canvasID, msg.imgPath);
}
});
/* In `content.js` */
chrome.runtime.sendMessage({
action: "getImg",
imgPath: "some/image.png",
canvasID: "someCanvasID"
});
这是一种更通用的方法(可以由任何具有最低配置的内容脚本使用),但将部分逻辑移动到内容脚本可能更简单。例如:
- 在内容脚本中定义一个函数,当使用 dataURL 调用该函数时,它会创建图像并将其绘制到画布上。
- 在后台页面中定义一个函数,它接受一个图像路径并返回一个 dataURL(如上所示)。
- 使用chrome.runtime.getBackgroundPage()获取对背景页面
window
对象的引用,调用该函数将图像路径转换为 dataURL,最后使用该 dataURL 创建图像并将其绘制到画布上。