canvas实现从已知画布截取部分并保存为图片上传服务器

canvas背景知识补充：

1. 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当开始时没有为canvas规定样式规则，其将会完全透明，也就是说最终转化保存的图片是透明背景色的。2.canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。1.裁剪画布在最近的项目中，我就遇到了一个问题，原本我通过计算知道了截取初始位置，宽和高，想着怎么修改插件源码让canvas只绘制我想要的部分，发现源码并不好改，牵扯内容太多，于是可以将同一个页面中其他canvas元素生成的图片作为图片源canvas这个技术点便成了关键，以已知画布canvas1作为图片源，新建一个新的画布，将所要的目标图片部分重绘到新画布即可关键代码原理

ctx.drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);//dx, dy, dWidth, dHeight,表示在canvas画布上规划处一片区域用来放置图片，dx, dy为canvas元素的左上角坐标，dWidth, dHeight指canvas元素上用在显示图片的区域大小//sx,sy,swidth,sheight,这4个坐标是针对图片元素的，表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角，然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。代码实现如下：

//计算得到画布canvasX(宽)，canvasY（高），startX（起始位置横坐标），startY（起始位置纵坐标）,已知画布canvas1varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');canvas.width=canvasX;canvas.height=canvasY;ctx.drawImage(canvas1,startX,startY,canvasX,canvasY,,,canvasX,canvasY);document.body.appendChild(canvas);//查看重汇的canvas2.之后我要将截取的部分图canvas上传至服务器,利用canvas.toBlob方法即可实现关键代码语法:

voidcanvas.toBlob(callback,type,encoderOptions);//callback:回调函数，可获得一个单独的Blob对象参数。//type 可选 DOMString类型，指定图片格式，默认格式为image/png。业务代码如下：

canvas.toBlob(function(blob) {console.log(blob)varform=newFormData();form.append('image',blob,'a.png');api.uploadImage(form).then(data=>{console.log(data.url);});})