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

Question

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

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

Answer 1

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

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

其中：

• srcImage =源图像
• SRCX =在X - 您的源图像上的图像要开始抓取像素
• srcY =您想要的源图像上的Y坐标以开始从
• 敛像素要启动从源图像
• srcHeight敛=要启动从源图像
• canvasX敛像素的矩形的高度的像素的矩形的srcWidth =宽度 - 要开始画你的像素矩形
• canvasY画布上的X坐标 - 要开始画你的像素矩形
• scaledWidth在画布上在Y坐标 - 缩放源像素矩形这个宽度在画到画布之前
• scaledHeight - 缩放源像素矩形该高度画到画布

例如之前：

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

这将抓住从MYMAP图像对象的像素的100x150px矩形开始坐标[50,50]。

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

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