图片在缩放截取后以固定尺寸上传到第三方

图片以固定尺寸上传。

 

最近有个需求，传递固定像素尺寸图片到第三方

有的时候需要前端传递给第三方一个裁剪过后固定尺寸的图片，用来印刷。

因为需要裁剪所以，需要用canvas进行绘图，进行裁剪。但是裁剪后的图片尺寸以裁剪时，裁剪出的图片像素以你裁剪时裁剪框内的图片像素为准，如果在裁剪时进行放大或缩小，因为裁剪框尺寸不变，所以裁剪出的图片像素尺寸会变化。

在此时需要固定尺寸。

因为要求传递Base64编码到后台。

所以确定尺寸时，分以下几步。

1、首先获取到canvas截取到的base64数据dataurl。

2、然后新建一个img元素，将它的src设置为dataurl。

3、再新建canvas对象，使用drawimage方法将img元素绘制在第三方需要的尺寸的画布中，这时img会充满或者缩小至需要尺寸。

---

canvas的drawImage()方法API如下：

context.drawImage(img, dx, dy); context.drawImage(img, dx, dy, dWidth, dHeight); context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

后面最复杂的语法虽然看上去有9大参数，但不用慌，实际上可以看出就3个参数：

img

就是图片对象，可以是页面上获取的DOM对象，也可以是虚拟DOM中的图片对象。

dx, dy, dWidth, dHeight

表示在canvas画布上规划处一片区域用来放置图片，dx, dy为canvas元素的左上角坐标，dWidth, dHeight指canvas元素上用在显示图片的区域大小。如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。

sx,sy,swidth,sheight

这4个坐标是针对图片元素的，表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角，然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。

drawImage()方法有一个非常怪异的地方，大家一定要注意，那就是5参数和9参数里面参数位置是不一样的，这个和一般的API有所不同。一般API可选参数是放在后面。但是，这里的drawImage()9个参数时候，可选参数sx,sy,swidth,sheight是在前面的。如果不注意这一点，有些表现会让你无法理解。

---

4、最后使用canvas的方法。我这里使用的是canvas.toDataURL()将canvas转换为base64编码，这时数据传递到第三方时，他们不需要处理直接使用img src即可得到需要的尺寸。

---

canvas天然提供了2个转图片的方法，一个是：

canvas.toDataURL()方法

语法如下：

canvas.toDataURL(mimeType, qualityArgument)

可以把图片转换成base64格式信息，纯字符的图片表示法。

其中：

mimeType表示canvas导出来的base64图片的类型，默认是png格式，也即是默认值是'image/png'，我们也可以指定为jpg格式'image/jpeg'或者webp等格式。file对象中的file.type就是文件的mimeType类型，在转换时候正好可以直接拿来用（如果有file对象）。

qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92，是一个比较合理的图片质量输出参数，通常情况下，我们无需再设定。

canvas.toBlob()方法

语法如下：

canvas.toBlob(callback, mimeType, qualityArgument)

---

原来尝试过直接使用ctx.putImageData的方法直接将dataurl绘制在canvas中，然后直接使用canvas.toDataURL()方法，但是发现dataurl和ctx.putImageData需要的参数形式不一致。

ctx.putImageData方法只能讲ctx.getImageData方法返回的参数绘制在canvas中。