在 Node Webkit 中渲染到 Canvas 的图像是模糊的
Images Rendered to Canvas in Node Webkit are Blurry
当我尝试使用以下代码在我的节点 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);
}
渲染到 canvas 的图像非常模糊。大约一分钟后,控制台中出现以下错误:
[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 可访问资源,但这没有帮助。
当您在 canvas 上绘制图像之前在其样式属性中设置 canvas 的高度和宽度时,似乎会出现此问题。在上面的例子中,可以通过设置来解决这个问题:
canvas.width = map.width;
canvas.height = map.height;
在图像的 onload 事件之后,删除任何与您的 canvas 高度或宽度相关的 css。
当我尝试使用以下代码在我的节点 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);
}
渲染到 canvas 的图像非常模糊。大约一分钟后,控制台中出现以下错误:
[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 可访问资源,但这没有帮助。
当您在 canvas 上绘制图像之前在其样式属性中设置 canvas 的高度和宽度时,似乎会出现此问题。在上面的例子中,可以通过设置来解决这个问题:
canvas.width = map.width;
canvas.height = map.height;
在图像的 onload 事件之后,删除任何与您的 canvas 高度或宽度相关的 css。