canvas 截取

今天分享的是业务中遇到的一个技术问题,提炼为关于canvas实现从已知画布截取部分并保存为图片上传服务器

canvas背景知识补充:
1.<canvas> 标签只有两个属性—— 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(起始位置纵坐标),已知画布canvas1
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvasX;
canvas.height = canvasY;
ctx.drawImage(canvas1, startX, startY, canvasX, canvasY, 0, 0, canvasX, canvasY);
document.body.appendChild(canvas);//查看重汇的canvas
2.之后我要将截取的部分图canvas上传至服务器,利用canvas.toBlob方法即可实现

关键代码语法:

void canvas.toBlob(callback, type, encoderOptions);
//callback:回调函数,可获得一个单独的Blob对象参数。
//type 可选 DOMString类型,指定图片格式,默认格式为image/png。

业务代码如下:

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

 })

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

原文地址:https://www.cnblogs.com/shuia/p/9300126.html