0
我正在做一個chrome擴展，它使用chrome.tabs.captureVisibleTab方法來抓取當前選項卡的屏幕截圖，然後顯示在從Chrome擴展的彈出窗口中。如果我使用img標記並使用來自chrome函數的數據（例如data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/2Q==），則<img>顯示像素完美，它很清晰，這就是我想要的。問題是我需要將它製作成畫布，而當我這樣做時，它變得模糊。如何使HTML5畫布顯示清晰的圖像基於鉻屏幕
這是我使用的嘗試做到這一點的代碼，但我無法弄清楚如何使畫布一樣清脆的圖像。
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的漁政船圖片，然後繪製成窗口大小的唯一的事情寬度/高度。你也從0.5px移動圖片。 –
@ManuelChoucino我對此很陌生，所以如果我有東西倒退，我會調整，但我想要做的是從鉻合併全屏大小的screencap，並濃縮到800 * 436的畫布，但我想如鏈接所示，保留相同大小的圖像元素所具有的清晰文本。我不確定這是否有幫助。 –
canvasContext2D對象中有一個選項，名爲[imageSmoothingEnabled]（https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled），默認情況下設置爲true。這仍然被認爲是實驗性的，你需要廠商前綴：'ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;'。此外，它並未得到所有瀏覽器版本（IE9和10）的廣泛支持，因此您可能需要執行自己的最近鄰居算法。 – Kaiido