如何使 html5 canvas 显示基于 chrome screencap 的清晰图像

Question

我正在制作一个 chrome 扩展，它使用 chrome.tabs.captureVisibleTab 方法获取当前选项卡的屏幕截图，然后在 chrome 扩展的弹出窗口中显示。如果我使用 img 标签并使用来自 chrome 函数的数据，例如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/2Q==，<img> 显示像素完美，清晰，这就是我想要的。问题是我需要把它变成 canvas，当我这样做时，它变得模糊。

This is a screencap of the <img> that uses the link data provided by Google to be used as a comparison to the canvas which is below.

This is the blurry canvas.

这是我用来尝试执行此操作的代码，但我不知道如何使 canvas 像图像一样清晰。

chrome.runtime.sendMessage({msg: "capture"}, function(response) {
    console.log(response.imgSrc);
    var img = document.createElement('img');
    var _canvas = document.createElement("canvas");
    img.src = response.imgSrc;
    img.height = 436;
    img.width = 800;
    document.getElementById('main-canvas').appendChild(img);
    draw(response);
});

function draw(response) {
    var canvas = document.getElementById('imageCanvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    //Get a 2d context
    var ctx = canvas.getContext('2d');
    //use image to paint canvas
    var _image = new Image();
    _image.onload = function() {
        ctx.drawImage(_image, 0, 0, 800, 436);
    }
    _image.src = response.imgSrc;

   document.getElementById('main-canvas').appendChild(canvas);
}

Answer 1

这是我用来解决问题的方法：High Resolution Canvas from HTML5Rocks

如何使 html5 canvas 显示基于 chrome screencap 的清晰图像

How to make html5 canvas display crisp image based off chrome screencap

javascript

html

google-chrome

canvas

blurry