Question

我有一个带有加载图像的画布。画布具有静态widkth和高度（800x600）。图像可以更小或更大。如果图像小于画布的大小，则使用以下代码将其放在中间

x = (canvas.width - image.width)/2;
y = (canvas.height - image.height) / 2;
ctx.drawImage(image, x, y)

我想现在用旧的画布替换旧画布，其中图像按照比例缩放。我的代码如下（出于测试目的，我在画布的左上角渲染图像，尚未实现精确位置）

oldCanvas = document.getElementById('myCanvas');
newCanvas = document.createElement('canvas');
ctx = newCanvas.getContext('2d');
x = y = 0;
newImageWidth = image.width * 2;
newImageHeight = image.height * 2;
ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas)

但帆布与旧款相同。我试着用同样的方法来缩放图像但是改变了newCanvas的大小并且工作了。我在这里做错了什么？

编辑：如果我使用drawImage来获取原始图像作为参数

，它会起作用

ctx.drawImage(image, 0, 0, newImageWidth, newImageHeight);

但是我想使用旧画布，因为要编辑图像mig，例如改变了亮度。在画布上使用canvas元素而不是Image Element是不一样的？

EDIT2：为了遵守堆栈的溢出策略，我在这里问：调用drawImage与image作为参数和canvas作为参数之间是否有区别？

Answer 1

是的，您可以使用图像元素或现有画布作为drawImage的图像源。

你的故障是因为你正在使用剪辑的drawImage版本，而不是缩放：

// this clips newImageWidth X newImageHeight pixels from oldCanvas at x,y 

ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);

相反，请使用drawImage的缩放版本：

ctx.drawImage(oldCanvas,                    // use the old canvas as an image source
    0,0, oldCanvas.width,oldCanvas.height,  // use entire old canvas 
    x,y, newImageWidth, newImageHeight);    // scale that old canvas to the new size

用缩放图像替换旧画布

1 个答案: