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);});})
领取专属 10元无门槛券
私享最新 技术干货