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

Question

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

我在html代码中添加了canvas对象，在其中加载了照片图像。 我正在尝试在一些随机坐标上缩放图像，但是缩放仅发生在画布的中心。 如果使用平移，则整个图像会随着原点的变化而移动。 我也尝试过转换，但是也无法达到预期的效果。

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)

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

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

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