0

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

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

4

1 回答 1

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] 处绘制放大的像素矩形

于 2013-04-07T19:10:59.867 回答