Canvas drawImage将我的方形图像缩放为矩形

Question

我有一个相当简单的测试，一张400 x 400白色图像，上面一遍又一遍地写着“ 1”。

我将其绘制在一个非常简单的1000 x 1000画布上，尝试将其大小调整为100 x 100。

var image = new Image();
document.body.appendChild(image);

image.addEventListener("load",function (event) {
    var image1 = event.target;
    var tempCanvas = window.document.createElement("canvas");

    tempCanvas.style.width = "1000px";
    tempCanvas.style.height = "1000px";
    tempCanvas.style.background = "rgba(0, 0, 0, 0.1)";

    document.body.appendChild(tempCanvas);

    tempCanvas.getContext("2d").drawImage(image1, 0, 0, 100, 100);
});

image.src = "1.png";

但是，尽管所有这些都是正方形，但我最终得到的是一个看起来奇怪，变形，怪异的缩放结果，它是矩形，低质量的，并且没有任何尺寸为100px。

在左侧，您可以看到原始图像，在右侧，即画布的左上角。

如果要原始图像，则为：https://i.stack.imgur.com/yDkLx.png

我想念什么？

Answer 1

尝试在width之前在canvas元素上设置height和drawImage()的值，而不要像以前那样依赖样式。

设置width和height属性对应于设置该画布元素的尺寸。

定义了画布元素的尺寸后，画布的渲染行为将变得更加可预测：

var image = new Image();
document.body.appendChild(image);

image.addEventListener("load",function (event) {
    var image1 = event.target;
    var tempCanvas = window.document.createElement("canvas");

    //tempCanvas.style.width = "400px";
    //tempCanvas.style.height = "400px";
    tempCanvas.style.background = "rgba(0, 0, 0, 0.1)";

    tempCanvas.width = 100;
    tempCanvas.height = 100;

    document.body.appendChild(tempCanvas);

    tempCanvas.getContext("2d").drawImage(image1, 0, 0, 100, 100);
});

image.src = "https://puu.sh/C4HE2/d96b531d08.png";

canvas {
  border:1px solid blue;
}

img {
  border:1px solid red;
}

上面的代码段显示了带有红色边框的原始源图像，以及带有蓝色边框的缩小的画布渲染图像-希望这会有所帮助！