我试图在画布中表示一个图像，并希望画布是其父容器宽度的一定百分比。问题是我在将图像添加到画布时以某种方式模糊了图像，我不想模糊图像。
我认为添加ctx.imageSmoothingEnabled = false会禁用模糊，但它似乎没有帮助。
有谁知道如何防止下面的图像在这个画布中模糊？任何想法将不胜感激！
var img = new Image();
img.src = 'https://gist.githubusercontent.com/duhaime/019f2ccb98391adbf460a10463059683/raw/c4c2bc1fa923d905aba0ef88e05c0760823d2cca/000630070000650.jpg';
img.onload = function() {
var canvas = document.querySelector('canvas');
canvas.width = hidden.clientWidth;
canvas.height = hidden.clientHeight;
var ctx = canvas.getContext('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(hidden,
0, 0, this.naturalWidth, this.naturalHeight,
0, 0, hidden.clientWidth, hidden.clientHeight)
}#container {
width: 800px;
background: #efefef;
}
#hidden {
position: absolute;
top: -1000%;
}
#hidden,
#canvas {
width: 60%;
}<div id='container'>
<img src='https://gist.githubusercontent.com/duhaime/019f2ccb98391adbf460a10463059683/raw/c4c2bc1fa923d905aba0ef88e05c0760823d2cca/000630070000650.jpg' id='hidden'>
<canvas></canvas>
</div>查看图像，我看到它的大小为 444 像素 x 800 像素，这是非常低的分辨率。它的显示方式在很大程度上取决于显示设备。
您在问题中将画布显示宽度设置为容器大小的 60%，并将画布分辨率设置为图像 (444by800)。
很可能是显示宽度和画布分辨率不匹配。
canvas.style.width并canvas.style.height表示图像将填充的页面区域，与画布分辨率无关。canvas.width和canvas.height属性以像素为单位表示画布的分辨率，用于存储图像内容的实际像素数假设 60%（对于#hidden {width : 60%}）是 1920 像素宽的高清显示器，画布将被拉伸，60% * 1920 = 1152px比画布大 2.6 倍。
画布内容没有模糊，您已经正确绘制了图像。浏览器将画布以大于画布分辨率的尺寸渲染到页面上，从而增加了模糊效果。
要阻止浏览器模糊画布的内容，请使用 CSS 属性image-rendering: pixelated;，如下例所示。
var img = new Image();
img.src = 'https://gist.githubusercontent.com/duhaime/019f2ccb98391adbf460a10463059683/raw/c4c2bc1fa923d905aba0ef88e05c0760823d2cca/000630070000650.jpg';
img.onload = function() {
canvas.width = this.naturalWidth
canvas.height = this.naturalHeight
var ctx = canvas.getContext('2d');
// ctx.imageSmoothingEnabled = false; // not needed as you are not streaching the image
ctx.drawImage(this, 0, 0);
}.big {
width:100%;
image-rendering: pixelated;
}<canvas class="big" id="canvas"></canvas>图像的分辨率非常低，因此在大多数情况下，您无法提高质量。
但由于它是黑白两色（不是黑色、灰色和白色），您可以将其拉伸到更大的画布上并增加对比度以消除渲染到画布时引入的一些模糊。
它是通过使用屏幕和颜色燃烧复合操作将画布多次渲染在自身之上来完成的。对比度增加以减少模糊但保持较少像素化的外观。
突出差异 使用此方法仅锐化了图像的左半部分。
var img = new Image();
img.src = 'https://gist.githubusercontent.com/duhaime/019f2ccb98391adbf460a10463059683/raw/c4c2bc1fa923d905aba0ef88e05c0760823d2cca/000630070000650.jpg';
img.onload = function() {
const bounds = canvas.getBoundingClientRect(); //Get the canvas display sise
canvas.width = bounds.width;
canvas.height = this.naturalHeight * (bounds.width / this.naturalWidth);
var ctx = canvas.getContext('2d');
// draw to canvas
ctx.drawImage(this, 0, 0,canvas.width,canvas.height);
// draw again using screen to up white areas
ctx.globalCompositeOperation = "screen";
ctx.drawImage(canvas, 0, 0,canvas.width/ 2,canvas.height,0, 0,canvas.width/ 2,canvas.height);
// draw again to pukl grays down some
ctx.globalCompositeOperation = "color-burn";
ctx.drawImage(canvas, 0, 0,canvas.width/ 2,canvas.height,0, 0,canvas.width/ 2,canvas.height);
// draw again using screen to up white areas
ctx.globalCompositeOperation = "screen";
ctx.globalAlpha = 0.5;
ctx.drawImage(canvas, 0, 0,canvas.width/ 2,canvas.height,0, 0,canvas.width/ 2,canvas.height);
// draw again to pukl grays down some
ctx.globalAlpha = 1;
ctx.globalCompositeOperation = "color-burn";
ctx.drawImage(canvas, 0, 0,canvas.width/ 2,canvas.height,0, 0,canvas.width/ 2,canvas.height);
}.big {
width:100%;
}<canvas class="big" id="canvas"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句