Javascript 如何基于chrome screencap使html5画布显示清晰的图像

我正在制作一个chrome扩展，它使用chrome.tabs.captureVisibleTab方法获取当前选项卡的屏幕盖，然后将其显示在chrome扩展的弹出窗口中。如果我使用img标签并使用来自chrome函数的数据，例如

data:image/jpeg；base64，/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…uuuaffabrrqauuffabrqauuffabrqauuffabrqauuffabrrrqauuffabrqauuffabrrrqauuffaf/2Q=

，

显示像素完美，清晰，这就是我想要的。问题是我需要把它做成画布，当我这样做的时候，它会变得模糊

这是我用来尝试这样做的代码，但我不知道如何使画布像图像一样清晰

---

这就是我用来解决问题的方法：

我唯一能看到的是，你正在用436 X 800的尺寸拍摄一张照片，然后将其绘制成窗口宽度/高度的大小。你也可以将图片从0.5px移动。@ManuelChoucino我是新手，所以如果我有东西向后，我会调整，但我试图做的是从chrome上取下全尺寸的屏幕盖，并将其压缩为800*436画布，但我想保留相同大小的图像元素所具有的清晰文本，如链接所示。我不确定这是否有用。在canvasContext2D对象中有一个名为“默认设置为true”的选项。这仍然被认为是实验性的，您需要供应商前缀：

ctx.mozimagesmouthingenabled=false；ctx.webkitmagesmoothingEnabled=假；ctx.msImageSmoothInEnabled=false；ctx.imageSmoothingEnabled=假。此外，并非所有浏览器版本（IE9和IE10）都广泛支持它，因此您可能需要执行自己的最近邻算法。
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);
}