请选择 进入手机版 | 继续访问电脑版

nodejs+express+canvas实现将经纬度转换坐标系并生成图片上传至七牛云

[复制链接]
暖男先生 发表于 2021-1-1 18:33:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
node+canvas背景画图功能

背景的canvas的使用不做详细说明。使用方式根本与前端使用一样,我主要说明一下自己在开发过程中遇到的一些坑
安装

  1. npm install canvas
复制代码
引入canvas到项目

  1. const Canvas = require('canvas'); // 引入canvas模块//第一步创建画布const canvas = Canvas.createCanvas(200, 200)const ctx = canvas.getContext('2d')//第二步设置绘制线条颜色ctx.strokeStyle = 'red'let listArray = [[25,35],[26,37],[27,89],[40,79]]listArray.map(x=>{        ctx.lineTo(x[0],x[1])})ctx.closePath();ctx.stroke();// 获取图片let getFile = canvas.toBuffer()
复制代码
遇到的问题:

1. npm安装canvas模块 node-pre-gyp WARN Using needle for node-pre-gyp https download

  1. 解决方式:使用淘宝镜像安装canvas
复制代码
  1. npm install canvas --canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/
复制代码
2.服务端摆设时一定要查抄gcc版本是否是4.7以上!

  1. gcc -v
复制代码

nodejs中对接七牛oss存储

这里根本没有什么问题,只要仔细看下七牛提供的开发文档就可以了,一下是毗连
七牛云开发文档(nodejs)
需要注意的

七牛Zone对象千万别写错了,七牛现在只提供四个机房:华东(Zone_z0)、华北(Zone_z1)、华南(Zone_z2)、北美(Zone_na0)
综上实现将经纬度转换坐标系并生成图片上传至七牛云整套代码

1.routes目次下创建一个upload.js文件

req.body 为调用你的接口所发送过来的数据 这个数据格式我会贴在代码下面
  1. let express = require(&#39;express&#39;);let router = express.Router();let Canvas = require(&#39;canvas&#39;);const fs = require(&#39;fs&#39;)const path = require(&#39;path&#39;)// 引入七牛模块  let qiniu = require("qiniu");/* GET users listing. */router.post(&#39;/&#39;, function(req, res, next) {  console.log(req.body)  // req.body 为调用你的接口所发送过来的数据   console.log(req.ip)  //要上传的空间名  // let bucket = &#39;igy&#39;;   let imageUrl = req.body.resImgUrl; // 域名名称  let Zone = null  switch (req.body.zone) {     case &#39;华东&#39;:      Zone = qiniu.zone.Zone_z0;      break;    case &#39;华北&#39;:      Zone = qiniu.zone.Zone_z1;      break;    case &#39;华南&#39;:      Zone = qiniu.zone.Zone_z2;      break;    case &#39;北美&#39;:      Zone = qiniu.zone.Zone_na0;      break;    default:      Zone = null;      break;  }  console.log(Zone)  let accessKey = req.body.QNaccessKey;  let secretKey = req.body.QNsecretKey;  let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);  let options = {    scope: req.body.bucket,    expires: 7200  };  let putPolicy = new qiniu.rs.PutPolicy(options);  let uploadToken = putPolicy.uploadToken(mac);  let config = new qiniu.conf.Config();  config.zone = Zone;  if (req.body.zone && req.body.strokeColor && req.body.bucket && req.body.QNaccessKey && req.body.QNsecretKey && req.body.bounds) {    const Image = Canvas.Image    const canvas = Canvas.createCanvas(200, 200)    const ctx = canvas.getContext(&#39;2d&#39;)    ctx.strokeStyle = req.body.strokeColor;    let fillColor = null;            let bounds = req.body.bounds    let maxLongitude = 0;    let minLongitude = 0;    let maxLatitude = 0;    let minLatitude = 0;    bounds.map(x=>{      // console.log(x)      if (x[0] > maxLongitude) {        maxLongitude = x[0]        if (minLongitude == 0) {           minLongitude = x[0]        }      } else if (x[0] < minLongitude) {         minLongitude = x[0]      }      if (x[1] > maxLatitude) {        maxLatitude = x[1]        if (minLatitude == 0) {          minLatitude = x[1]        }      } else if (x[1] < minLatitude) {         minLatitude = x[1]      }      // })    })    let xScale = 100 / Math.abs(maxLongitude - minLongitude)    let yScale = 100 / Math.abs(maxLatitude - minLatitude)    let scale = xScale < yScale ? xScale : yScale    let xoffset=200/2.0-Math.abs(maxLongitude - minLongitude)/2*scale    let yoffset=200/2.0-Math.abs(maxLatitude - minLatitude)/2*scale    bounds.map(y => {       ctx.lineTo((y[0] - minLongitude) * scale+xoffset, (maxLatitude - y[1]) * scale+yoffset);    })    ctx.closePath();    if (req.body.fillColor && req.body.fillColor != &#39;&#39;) {      fillColor = req.body.fillColor      ctx.fillStyle=fillColor;      ctx.fill();    }    ctx.stroke();    // 构建图片名    let fileName = Date.now() + &#39;.png&#39;;    if (req.body.fileName && req.body.fileName != &#39;&#39;) {       fileName = req.body.fileName + &#39;.png&#39;    }        let filePath =  __dirname + &#39;/&#39;  + fileName;        fs.writeFile(filePath, canvas.toBuffer(),(err)=>{      if(err){        res.json({status: 500, message: &#39;图片生存失败&#39;});      } else {        let localFile = filePath;        let formUploader = new qiniu.form_up.FormUploader(config);        let putExtra = new qiniu.form_up.PutExtra();        let key = fileName;        // 文件上传        formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr,          respBody, respInfo) {          if (respErr) {            res.json({status:&#39;-2&#39;,message:&#39;上传失败&#39;,error:respErr});             }          // console.log(respInfo)          if (respInfo.statusCode == 200) {            let imageSrc = imageUrl + respBody.key;            res.json({ status: &#39;200&#39;, message: &#39;上传乐成&#39;, data: {imgUrl:imageSrc,hash:respBody.hash,imgName:respBody.key}});           } else {            res.json({status:&#39;-1&#39;,message:&#39;上传失败&#39;,error:JSON.stringify(respBody)});             }          // 上传之后删除本地文件          fs.unlinkSync(filePath);        });      }    });  }else{    res.json({status: 401, message: &#39;参数错误!&#39;,data:req.body});  }});module.exports = router;
复制代码
以下是请求参数
  1. {    "bounds": [        [            122.652281,            45.244661        ],        [            122.630859,            45.236583        ],        [            122.616037,            45.258384        ],        [            122.633296,            45.270245        ]    ],    "strokeColor": "red",    "fillColor":"rgba(128, 100, 162, 0.7)",    "bucket":"空间名称",    "resImgUrl":"你的七牛设置的CNAME",    "zone":"华南",    "QNaccessKey":"七牛的accessKey",    "QNsecretKey":"七牛的secretKey",    "fileName":""}
复制代码


来源:https://blog.csdn.net/qq_41205069/article/details/112030509
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )