画像は

Question

ぼやけている：

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); 
} 

キャンバスに描画された画像は非常にぼやけています。約1分後、コンソールに次のエラーが表示されます。

[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

この問題は、イメージをキャンバス上に描画する前に、スタイル属性にキャンバスの高さと幅を設定した場合に発生すると思われます。画像のonloadイベント後

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

を、そしてあなたのキャンバスの高さや幅に関連する任意のCSSを削除する：上記の例では、問題は、設定することで改善することができます。