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

【问题标题】：How to make html5 canvas display crisp image based off chrome screencap如何使 html5 画布显示基于 chrome screencap 的清晰图像
【发布时间】：2015-12-02 18:57:20
【问题描述】：

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

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.

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

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

【问题讨论】：

我唯一能看到的是，你正在用 436 X 800 的尺寸拍照，然后将其绘制成 Window Width/Height 的大小。你也将图片从 0.5px 移动。
@ManuelChoucino 我是新来的，所以如果我倒退了，我会调整，但我想做的是从 chrome 中取出全尺寸的屏幕截图并将其压缩到 800 * 436 画布，但我想保留相同大小的图像元素所具有的清晰文本，如链接所示。我不确定这是否有帮助。
canvasContext2D 对象中有一个名为imageSmoothingEnabled 的选项默认设置为true。这仍然被认为是实验性的，您需要供应商前缀：ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;。此外，并非所有浏览器版本（IE9&10）都广泛支持它，因此您可能需要执行自己的最近邻算法。

标签： javascript html google-chrome canvas blurry

【解决方案1】：

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

【讨论】：