欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-28 17:50:04
node+canvas后台绘图功能后台的canvas的使用不做详细说明。使用方式基本与前端使用一样,我主要说明一下自己在开发过程中遇到的一些坑安装npm install canvas引入canvas到项目const Canvas = require('canvas'); // 引入canvas模块//第一步创建画布const canvas = Canvas.createCanvas(200, 200)const ctx = canvas.getContext('2d')//第二步设置绘制...

node+canvas后台绘图功能

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

安装

npm install canvas

引入canvas到项目

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

解决方式:使用淘宝镜像安装canvas
npm install canvas --canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/

2.服务端部署时一定要检查gcc版本是否是4.7以上!

gcc -v

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

nodejs中对接七牛oss存储

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

需要注意的

七牛Zone对象千万别写错了,七牛目前只提供四个机房:华东(Zone_z0)、华北(Zone_z1)、华南(Zone_z2)、北美(Zone_na0)

综上实现将经纬度转换坐标系并生成图片上传至七牛云整套代码

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

req.body 为调用你的接口所发送过来的数据 这个数据格式我会贴在代码下面

let express = require('express');
let router = express.Router();
let Canvas = require('canvas');
const fs = require('fs')
const path = require('path')

// 引入七牛模块  
let qiniu = require("qiniu");

/* GET users listing. */
router.post('/', function(req, res, next) {
  console.log(req.body)
  // req.body 为调用你的接口所发送过来的数据 
  console.log(req.ip)
  //要上传的空间名
  // let bucket = 'igy'; 
  let imageUrl = req.body.resImgUrl; // 域名名称
  let Zone = null
  switch (req.body.zone) { 
    case '华东':
      Zone = qiniu.zone.Zone_z0;
      break;
    case '华北':
      Zone = qiniu.zone.Zone_z1;
      break;
    case '华南':
      Zone = qiniu.zone.Zone_z2;
      break;
    case '北美':
      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('2d')
    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 != '') {
      fillColor = req.body.fillColor
      ctx.fillStyle=fillColor;
      ctx.fill();
    }
    ctx.stroke();
    // 构建图片名
    let fileName = Date.now() + '.png';
    if (req.body.fileName && req.body.fileName != '') { 
      fileName = req.body.fileName + '.png'
    }
    
    let filePath =  __dirname + '/'  + fileName;
    
    fs.writeFile(filePath, canvas.toBuffer(),(err)=>{
      if(err){
        res.json({status: 500, message: '图片保存失败'});
      } 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:'-2',message:'上传失败',error:respErr});   
          }
          // console.log(respInfo)
          if (respInfo.statusCode == 200) {
            let imageSrc = imageUrl + respBody.key;
            res.json({ status: '200', message: '上传成功', data: {imgUrl:imageSrc,hash:respBody.hash,imgName:respBody.key}}); 
          } else {
            res.json({status:'-1',message:'上传失败',error:JSON.stringify(respBody)});   
          }
          // 上传之后删除本地文件
          fs.unlinkSync(filePath);
        });
      }
    });
  }else{
    res.json({status: 401, message: '参数错误!',data:req.body});
  }
});

module.exports = router;

以下是请求参数

{
    "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":""
}

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

本文地址:https://blog.csdn.net/qq_41205069/article/details/112030509

相关标签: nodejs canvas