Question

当我尝试使用以下代码在我的节点webkit应用程序中加载图像时：

var canvas  = document.getElementById('cytoBkg');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

var map = new Image();
map.src = './maps/map.jpg';

map.onload = function() {
    ctx.drawImage(map, 0, 0, map.width, map.height, 0, 0, canvas.width, canvas.height);
    console.log(map.width, map.height);
}

渲染到画布的图像非常模糊。大约一分钟后，控制台中出现以下错误：

[7583:7583:0519/153517.738479:ERROR:CONSOLE(0)] "Denying load of chrome-extension://dekacdafkimiiblogellomljhcemdaab/maps/map.jpg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@691bdb490962d4e6ae7f25c6ab1fdd0faaf19cd0/&dockSide=undocked (0)

如何正确加载图像？我尝试将图像添加到我的package.json文件中作为Web可访问资源，但这没有帮助。

Answer 1

在画布上绘制图像之前，在画布的样式属性中设置画布的高度和宽度时，似乎会出现此问题。在上面的示例中，可以通过设置：

来解决问题

canvas.width = map.width;
canvas.height = map.height;

在图像的onload事件之后，并删除与画布的高度或宽度相关的任何css。

在Node Webkit中渲染到Canvas的图像很模糊

1 个答案: