我正在尝试将300dpi图像绘制到画布对象，但在Chrome中它显示的质量非常差。当我使用下面的代码时，它没有改进，但那是因为devicePixelRatio与backingStoreRatio相同（都是1）。
然后我尝试强制进行一些比率更改并找到以下内容：
ratio更改为2并强制执行缩放代码，则会以更好的分辨率绘制到画布。 ratio更改为大于2的任何内容（例如3，4，5，6等），那么差分辨率！这一切都是在台式电脑上完成的。
如何确保画布以高分辨率绘制？
（代码来自：http://www.html5rocks.com/en/tutorials/canvas/hidpi/）
/**
* Writes an image into a canvas taking into
* account the backing store pixel ratio and
* the device pixel ratio.
*
* @author Paul Lewis
* @param {Object} opts The params for drawing an image to the canvas
*/
function drawImage(opts) {
if(!opts.canvas) {
throw("A canvas is required");
}
if(!opts.image) {
throw("Image is required");
}
// get the canvas and context
var canvas = opts.canvas,
context = canvas.getContext('2d'),
image = opts.image,
// now default all the dimension info
srcx = opts.srcx || 0,
srcy = opts.srcy || 0,
srcw = opts.srcw || image.naturalWidth,
srch = opts.srch || image.naturalHeight,
desx = opts.desx || srcx,
desy = opts.desy || srcy,
desw = opts.desw || srcw,
desh = opts.desh || srch,
auto = opts.auto,
// finally query the various pixel ratios
devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;
// ensure we have a value set for auto.
// If auto is set to false then we
// will simply not upscale the canvas
// and the default behaviour will be maintained
if (typeof auto === 'undefined') {
auto = true;
}
// upscale the canvas if the two ratios don't match
if (auto && devicePixelRatio !== backingStoreRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
context.scale(ratio, ratio);
}
context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
}
仅进行以下更改会产生高分辨率的画布图像（为什么？）：
//WE FORCE RATIO TO BE 2
ratio = 2;
//WE FORCE IT TO UPSCALE (event though they're equal)
if (auto && devicePixelRatio === backingStoreRatio) {
如果我们将上述内容更改为3的比例，则不再是高分辨率！
编辑：一个额外的观察 - 即使使用2倍比率，虽然它的分辨率明显更高，但它仍然不如在img标签中显示图像那么清晰
答案 0 :(得分：9)
从问题链接的HTML5Rocks文章使得事情变得比他们需要的更困难，但它与我见过的其他资源（1，2，{{3}一样犯了同样的基本错误}，3）。这些参考文献给出了这个公式的一些变化：
var rect = canvas.getBoundingClientRect();
canvas.width = Math.round (devicePixelRatio * rect.width); // WRONG!
公式错了。更好的公式是
var rect = canvas.getBoundingClientRect();
canvas.width = Math.round (devicePixelRatio * rect.right)
- Math.round (devicePixelRatio * rect.left);
关键是，通过devicePixelRatio缩放宽度或高度（即，两个位置的差异）是没有意义的。你应该只扩展绝对位置。我找不到这个确切点的参考，但我认为很明显，一旦你得到它。
无法从CSS宽度和高度（与设备无关的像素）计算矩形（设备像素）的物理宽度和高度。
假设您有两个元素，其中与设备无关的像素中的边界矩形为
{ left: 0, top: 10, right: 8, bottom: 20, width: 8, height: 10 },
{ left: 1, top: 20, right: 9, bottom: 30, width: 8, height: 10 }.
现在假设devicePixelRatio为1.4，元素将覆盖这些设备像素矩形：
{ left: 0, top: 14, right: 11, bottom: 28, width: 11, height: 14 },
{ left: 1, top: 28, right: 13, bottom: 42, width: 12, height: 14 },
其中left，top，right和bottom乘以devicePixelRatio并四舍五入到最接近的整数（使用Math.round（））。
您会注意到两个矩形在与设备无关的像素中具有相同的宽度，但在设备像素中具有不同的宽度。 ▯
以下是测试的代码示例。将其加载到浏览器中，然后使用鼠标放大和缩小。最后一个画布应该总是有尖锐的线条。 其他三个在某些决议中会模糊不清。
在桌面版Firefox，IE，Edge，Chrome和Android Chrome以及Firefox上进行测试。 （注意，这在4上不起作用，因为getBoundingClientRect在那里返回不正确的值。）
<!DOCTYPE html>
<html>
<head>
<script>
function resize() {
var canvases = document.getElementsByTagName("canvas");
var i, j;
for (i = 0; i != canvases.length; ++ i) {
var canvas = canvases[i];
var method = canvas.getAttribute("method");
var dipRect = canvas.getBoundingClientRect();
var context = canvas.getContext("2d");
switch (method) {
case "0":
// Incorrect:
canvas.width = devicePixelRatio * dipRect.width;
canvas.height = devicePixelRatio * dipRect.height;
break;
case "1":
// Incorrect:
canvas.width = Math.round(devicePixelRatio * dipRect.width);
canvas.height = Math.round(devicePixelRatio * dipRect.height);
break;
case "2":
// Incorrect:
canvas.width = Math.floor(devicePixelRatio * dipRect.width);
canvas.height = Math.floor(devicePixelRatio * dipRect.height);
break;
case "3":
// Correct:
canvas.width = Math.round(devicePixelRatio * dipRect.right)
- Math.round(devicePixelRatio * dipRect.left);
canvas.height = Math.round(devicePixelRatio * dipRect.bottom)
- Math.round(devicePixelRatio * dipRect.top);
break;
}
console.log("method " + method
+ ", devicePixelRatio " + devicePixelRatio
+ ", client rect (DI px) (" + dipRect.left + ", " + dipRect.top + ")"
+ ", " + dipRect.width + " x " + dipRect.height
+ ", canvas width, height (logical px) " + canvas.width + ", " + canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "cyan";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
for (j = 0; j != Math.floor (canvas.width / 2); ++ j) {
context.fillRect(2 * j, 0, 1, canvas.height);
}
}
};
addEventListener("DOMContentLoaded", resize);
addEventListener("resize", resize);
</script>
</head>
<body>
<canvas method="0" style="position: absolute; left: 1px; top: 10px; width: 8px; height: 10px"></canvas>
<canvas method="1" style="position: absolute; left: 1px; top: 25px; width: 8px; height: 10px"></canvas>
<canvas method="2" style="position: absolute; left: 1px; top: 40px; width: 8px; height: 10px"></canvas>
<canvas method="3" style="position: absolute; left: 1px; top: 55px; width: 8px; height: 10px"></canvas>
</body>
</html>
答案 1 :(得分：3)
您可以使用的一个技巧是将画布宽度和高度实际设置为照片的像素高度和宽度，然后使用css调整图像大小。下面是一个sudo代码示例。
canvasElement.width = imgWidth;
canvasElement.height = imgHeight;
canvasElement.getContext("2d").drawImage(ARGS);
然后你可以使用宽度＆amp;高度设置或三维变换。
canvasElement.style.transform = "scale3d(0.5,0.5,0)";
或
canvasElement.style.width = newWidth;
canvasElement.style.height = newWidth * imgHeight / imgWidth;
我建议您使用3d变换，因为当您使用3d变换时，元素的图像数据会被复制到GPU，因此您不必担心任何质量下降。
我希望这有帮助！