图片以固定尺寸上传。
最近有个需求，传递固定像素尺寸图片到第三方
有的时候需要前端传递给第三方一个裁剪过后固定尺寸的图片，用来印刷。
因为需要裁剪所以，需要用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中。