node利用canvas处理图像,返回给前端,

1.安装 canvas

npm i canvas -s

2.引入

const { createCanvas, loadImage } = require('canvas');
const canvas = createCanvas(width, height);
const context = canvas.getContext('2d')

3.处理

//这里是因为传入多个坐标,所以进行了循环
//imag 要加载的图片,0,0,分别代表x,坐标,后两个参数分别代表宽度和高度
context.drawImage(image, 0, 0,image.width,image.height);
        list.forEach((item, index) => {
             let color = item.is_coal == true ? 'red' : 'green';
             context.beginPath();  //开始一条路径,或重置当前的路径。
             context.moveTo(item.left, item.top);  //画直线
             context.lineTo(item.right, item.top);
             context.lineTo(item.right, item.bottom);
             context.lineTo(item.left, item.bottom);
             context.lineTo(item.left, item.top);
             context.strokeStyle  = color   //给线条上颜色
             context.stroke();   //画图
             context.beginPath()  
             context.arc(item.right + 5, item.top - 10, 10, 0, 2 * Math.PI);  //画圆形
             context.textAlign = "center";  //设置文字对齐方式
             context.textBaseline = 'middle'//设置文字对齐方式
             this.context.fillStyle=color;  //设置文字颜色
             this.context.fillText(index+1, item.left + 5, item.top - 10);
             this.context.stroke();
         })
         			//拿到base64渲染
              console.log(canvas.toDataURL()));
              
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值