在预设位置缩放 html5 画布上的照片图像

Question

我一直在为这个问题苦苦挣扎，希望有人能够帮助我解决这个问题。

我在我的 html 代码中添加了画布对象，我在其中加载了一张照片图像。我试图在一些随机坐标处缩放图像，但缩放只发生在画布的中心。如果我使用平移，整个图像会随着原点的变化而移动。我也尝试过转换，但这也没有给出预期的结果。

Answer 1

使用 context.drawImage() + 扩展参数将原始图像缩放到画布上

context.drawImage(srcImage, srcX, srcY, srcWidth, srcHeight, 
      canvasX, canvasY, scaledWidth, scaledHeight)

地点：

• srcImage = 您的源图像
• srcX = 源图像的 X 坐标，您要开始从中抓取像素
• srcY = 源图像上的 Y 坐标，您要开始从中抓取像素
• srcWidth = 要从源图像开始抓取的像素矩形的宽度
• srcHeight = 要从源图像开始抓取的像素矩形的高度
• canvasX - 画布上您要开始绘制像素矩形的 X 坐标
• canvasY - 画布上您要开始绘制像素矩形的 Y 坐标
• scaledWidth - 在绘制到画布之前将源像素矩形缩放到这个宽度
• scaledHeight - 在绘制到画布之前将源像素矩形缩放到这个高度

例如：

context.drawImage(myMap, 50,50,100,150,  20,20,200,300)

这将从坐标 [50,50] 开始的 myMap 图像对象中抓取一个 100x150 像素的像素矩形。

然后它将像素矩形缩放到200x300px。

最后，它将在画布上的坐标 [20,20] 处绘制放大的像素矩形