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

Question

我一直在努力解决这个问题，我希望有人能够帮助我解决这个问题。

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

Answer 1

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

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

其中：

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

例如：

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

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

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

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