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()));
              

最后

以上就是听话飞机为你收集整理的node利用canvas处理图像，返回给前端，的全部内容，希望文章能够帮你解决node利用canvas处理图像，返回给前端，所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。