javascript - drawImage 将所有图片调整为相同宽度

Question

我使用drawImage来“调整”图像的大小；

img.onload = function(){
            var width = img.width * 0.16,
                height = img.height * 0.16;

            canvas.width = width,
            canvas.height = height;


            ctx.imageSmoothingEnabled = false;

            ctx.drawImage(img, 0, 0, width, height);
        }

每当我像这样使用它时，它都会很好地显示图像

但是每当我固定宽度和高度时，它都会显示初始化有点模糊 img.onload = 函数(){

            ctx.imageSmoothingEnabled = false;

            ctx.drawImage(img, 0, 0, 56, 56);
        }

所以我想要固定的高度和宽度，但必须显示不模糊

Answer 1

您的第一个版本将 Canvas 的宽度和高度设置为与图像相同的尺寸，因此当您绘制图像时，不会执行缩放(实际上，您的img的宽度和高度缩小了16%，或者0.16，以匹配您指定的值，但在绘制到 Canvas 时不会缩小图像，因为 drawImage() 的最后 2 个参数与 Canvas 的尺寸匹配。

img.onload = function(){
            var width = img.width * 0.16,
                height = img.height * 0.16;

            canvas.width = width, // canvas's width === img's width
            canvas.height = height; // canvas's heeight === img's height


            ctx.imageSmoothingEnabled = false;

            ctx.drawImage(img, 0, 0, width, height); // draw img at the same dimensions as those of the canvas => no scaling => no blur
        }

然而，您的第二个版本以 56x56 大小绘制图像，这与 Canvas 的尺寸不匹配，因此图像被缩小，因此显得有点模糊。

   img.onload = function(){

        ctx.imageSmoothingEnabled = false;

        ctx.drawImage(img, 0, 0, 56, 56); // last 2 arguments tell the browser to draw the image at 56x56 px dimensions
    }