12.16 HTML Canvas图像调整和裁剪

根据应用场景来调整或裁剪图像

我们现在知道调用drawImage方法的第一种方式,即将完整尺寸的图像绘制到画布上,但超过画布边界的部分被剪掉了。 为了解决这个问题,需要调整图像大小或者控制图像的裁剪。通过drawImage方法的最后两种调用方式都能够完成这两个任务。 第一种调用可以调整图像大小,第二种可以同时调整和裁剪图像。drawlmage的所有调用方式的唯一区别是所使用参数的个数和类型不同。

调整图像大小

调整图像大小与绘制完整尺寸的图像一样简单,只需要传入希望绘制的图像宽度和高度。用代码来表示,带有调整大小的参数的drawlmage方法如下所示:

context.drawImage(image, x, y, width, height);

将前一个例子的drawlmage方法修改为以下形式,图像就能够被调整为在画布中完全显示(参见图1):

context.drawImage(image, 0, 0, 300, 216); 

其中,宽度为300像素,与画布的宽度相等。而高度是按照原始图像的高宽比(高度与宽度的比例)计算得来的。 要计算这个高宽比,只需要用高度除以宽度,对于原始图像(宽394像素,高284像素),计算得到的高宽比为0.7208(284÷394)。 然后,用宽度乘以这个比例就可以计算出调整后的图像高度。例如,假设调整后的宽度为500像素,那么高度就是300×0.7208,结果为216。

调整图像使之在画布中完全显示

如果要绘制完整的图像,那么调整大小是很有用的,但是有时候我们需要进一步控制图像绘制的部分,那么它就缺少足够的支持了。这时,我们需要使用裁剪功能。

裁剪图像

裁剪的目的是将图像剪切为较小尺寸,这通常是因为我们只需要使用被裁剪对象的一部分。 这是在摄影中常用到的一种技术,目的是突出照片的某个特定区域。 裁剪画布所采取的方法与流行的照片编辑应用程序(如Adobe Photoshop)是完全相同的:划定一个希望保留的矩形区域,然后将矩形以外的全部内容删除。

裁剪是drawImage方法的最后一种用法,它总共有9个参数: 源图像、源图像的裁剪区原点坐标(x,y)、源图像的裁剪区宽度和高度、在画布(目标)上绘制图像的原点坐标(x,y)及在画布上绘制图像的宽度和高度。 用代码表示,这些参数如下所示(w表示宽度,h表示高度):

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); 

想要用图形精确描述所有这些参数的作用可能有些难,所以图2应该能够对理解它们有一定的帮助。

图2
在画布中裁剪图像

我们可以从前面的图像中裁剪出一小部分,然后将它绘制到画布中:

context.drawImage(image, 0, 0, 250, 250, 0, 0, 250, 250); 

在这个例子中,我们从源图像的左上角(0,0)开始裁剪出250像素的正方形,然后以相同的宽度和高度将它绘制到画布的左上角(参见图3)。

裁剪图像而不改变其尺寸

在将裁剪的图像绘制到画布时,还可以调整它的尺寸,例如:

context.drawImage(image, 0, 0, 250, 250, 0, 0, 300, 300); 

这段代码实际上与前一个例子是完全相同的,只是所绘制的图像不再保留裁剪区域的原始尺寸,而是将它放大到填满画布 (参见图4)。

裁剪图像同时调整图像尺寸