画布：调整图像大小而不模糊

Question

我正在尝试在画布中表示图像，并希望画布为其父容器宽度的某个百分比。问题是我在将图像添加到画布时以某种方式模糊了图像，我不想模糊图像。

我认为添加 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>

Answer 1

画布分辨率和显示尺寸不一样。

查看图像，我看到它的大小为 444 像素 x 800 像素，分辨率非常低。它的显示方式很大程度上取决于显示设备。

在您的问题中，将画布显示宽度设置为容器大小的 60%，并将画布分辨率设置为图像 (444by800)。

很有可能是显示宽度和画布分辨率不匹配。

画布显示尺寸

• canvas.style.width 和 canvas.style.height 代表页面上图像将填充的区域，与画布分辨率无关。

画布分辨率

• canvas.width 和 canvas.height 属性表示画布的分辨率（以像素为单位），用于存储图像内容的实际像素数

浏览器正在添加模糊。

假设 60%（#hidden {width : 60%}）是 1920 像素宽的高清显示器，画布将被拉伸到比画布大 2.6 倍的60% * 1920 = 1152px。

画布内容没有模糊，您已经正确绘制了图像。是浏览器以大于画布分辨率的尺寸将画布渲染到页面上，从而添加了模糊效果。

简单修复

要阻止浏览器模糊画布的内容，请使用 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>

简单锐化两种色调的黑白。

图像的分辨率非常低，因此在大多数情况下您无法提高质量。

但由于它是黑白两种色调（不是黑色、灰色和白色），您可以在更大的画布上拉伸它并增加对比度以消除渲染到画布时引入的一些模糊。

p>

它是通过使用屏幕和颜色燃烧合成操作将画布多次渲染到自身之上来完成的。增加对比度以减少模糊，同时保持较少像素化的外观。

为了突出差异，使用此方法仅对图像的左半部分进行了锐化。

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>

Answer 2

我不确定这是否是您所需要的，但我对顶部感到惊讶：-1000%。例如，在这种情况下，如果容器给出“位置：相对”，则具有 % 的子项的属性将相对于父项。

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;
  position:relative;
}

#hidden {
  position: absolute;
  top: 0;
  right: 0;
}
#hidden, canvas {
  width: 50%;
}

<div id='container'>
  <img src='https://gist.githubusercontent.com/duhaime/019f2ccb98391adbf460a10463059683/raw/c4c2bc1fa923d905aba0ef88e05c0760823d2cca/000630070000650.jpg' id='hidden'>
  <canvas></canvas>
</div>