画布:调整图像大小而不会模糊 [英] Canvas: Resizing image without blurring
问题描述
我试图在画布上表示图像，并希望画布占其父容器宽度的一定百分比.麻烦在于我在将图像添加到画布时会以某种方式使图像模糊，并且我不想使图像模糊.
I'm trying to represent an image in a canvas, and wish for the canvas to be a certain percent of its parent container's width. The trouble is I'm somehow blurring the image when adding it to the canvas, and I don't want to blur the image.
我认为添加 ctx.imageSmoothingEnabled = false 会禁用模糊效果，但似乎没有帮助.
I thought adding ctx.imageSmoothingEnabled = false would disable the blurring, but it doesn't appear to be helping.
有人知道如何防止下面的图像在此画布上模糊吗?任何想法将不胜感激！
Does anyone know how I can prevent the image below from blurring in this canvas? Any thoughts would be greatly appreciated!
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>推荐答案
画布分辨率和显示尺寸不相同.
查看图片，我看到它的尺寸为444px x 800px，分辨率非常低.它的显示方式在很大程度上取决于显示设备.
Canvas resolution and display size are not the same.
Looking at the image I see it is 444px by 800px in size which is very low resolution. How it displays will very much depend on the display device.
您的问题中，将画布显示宽度设置为容器大小的60％，并将画布分辨率设置为图像(444by800).
You have in your question, set the canvas display width to 60% of the containers size and the canvas resolution you have set to the image (444by800).
很有可能显示宽度和画布分辨率不匹配.
It is very likely that the display width and the canvas resolution do not match.
-
canvas.style.width和canvas.style.height表示图像将填充的页面区域，与画布分辨率无关.
canvas.style.widthandcanvas.style.heightrepresent the area on the page the image will fill and have nothing to do with the canvas resolution.
-
canvas.width和canvas.height属性代表画布的分辨率(以像素为单位)，即用于存储图像内容的实际像素数
canvas.widthandcanvas.heightproperties represent the resolution of the canvas in pixels, the actual number of pixels used to store the image content
假设60％(对于 #hidden {width:60％} )具有1920像素宽的高清显示屏，则画布将拉伸到 60％* 1920 = 1152px >比画布大2.6倍.
Assuming the 60% (for #hidden {width : 60%}) is of a HD display 1920px wide the canvas will be stretched over 60% * 1920 = 1152px which is 2.6 times larger than the canvas.
画布内容未模糊，您已正确绘制了图像.是浏览器将画布渲染到页面上的尺寸大于添加模糊效果的画布分辨率.
The canvas content is not blurred, you have drawn the image correctly. It is the browser that is rendering the canvas onto the page at a size larger than the the canvas resolution that is adding the blurring.
要阻止浏览器模糊画布的内容，请使用CSS属性 image-rendering:pixelated; ，如下例所示.
To stop the browser from blurring the content of the canvas use the CSS attribute image-rendering: pixelated; as in the example below.
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>图像的分辨率很低，因此在大多数情况下您无能为力，无法提高质量.
The image is very low resolution so there is not much you can do to improve the quality in most cases.
但是因为它是两种音调Black&白色(不是黑色，灰色和白色)，您可以在更大的画布上将其拉伸并增加对比度，以消除渲染到画布时引入的一些模糊.
But as it is a two tone Black & White (not black, grays, and white) you can stretch it out on a larger canvas and increase the contrast to remove some of the blurring introduced when rendered to the canvas.
这是通过使用屏幕和颜色加深复合操作将画布在其自身顶部多次渲染来完成的.增强对比度以减少模糊，同时保持像素化的外观.
It is done by using the screen and color-burn composite operations to render the canvas on top of itself several times. Contrast is increase to reduce the blur yet keeping a less pixelated look.
突出显示差异使用此方法仅将图像的左半部分锐化.
To highlight the difference Only the left half of the image has been sharpened using this method.
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>这篇关于画布:调整图像大小而不会模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
