vue中使用canvas做电子签名 + nodejs解析base

前言：

  ```本项目采用VUE框架 + node.js```

  在vue开发中，有这样一个场景：用户电子签名并上传服务器，回显到前端页面。如截图：

image.png

 canvas手写的电子签名图点击提交的时候生成一张图片
 然后上传到服务器，服务器返回给前端一个url链接
 就是这个生成的图片的地址
 前端拿到这个url，渲染到界面上。

遇到的问题：

  1. vue中怎么使用canvas？
  2. canvas生成的图片是base64格式的，后端怎么解析返回url给前端？
  3. /** 新增 **/前端传给后端的base64格式的文件过大，报错413，怎么解决？

解决方案：

  1. vue中使用canvas  
     简单粗暴使用 vue-signature   ----> Vue.js的电子签名组件
     1) npm install vue-signature
     2) main.js中use它
         import vueSignature from "vue-signature"
         Vue.use(vueSignature)
     3）xxx.vue中这样写：
        <template>
           <div id="app">
            <vueSignature ref="signature" :sigOption="option" :w="'800px'"  :h="'400px'" :disabled="disabled" :defaultUrl="dataUrl"></vueSignature> 
            <vueSignature ref="signature1" :sigOption="option"></vueSignature> 
            <button @click="save">提交</button>
            <button @click="clear">清空</button>
            <button @click="undo">回退</button>
            <button @click="addWaterMark">加水印</button>
          </div>
       </template>
      <script>
     export default {
        name: "app",
        data() {
          return {
             option:{
                penColor:"rgb(0, 0, 0)",
                backgroundColor:"rgb(255,255,255)"
              },
        };
    },
        methods:{
          save(){
              var _this = this;
              var png = _this.$refs.signature.save()
              console.log(png);
          },
          clear(){
              var _this = this;
              _this.$refs.signature.clear();
        },
        undo(){
              var _this = this;
              _this.$refs.signature.undo();
        },
        addWaterMark(){
               var _this = this;
              _this.$refs.signature.addWaterMark({
                  text:"水印文字",            // 水印文字
                  font:"20px Arial",         // 大小、字体
                  style:'fill',               // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill       
                  x:100,                     // x轴位置
                  y:200,                     // y轴位置            
              });
            },
          }
        };
</script>

中间没有失误的话就是这个样子：

image.png

2.`后端解析base64文件返回url给前端`
    点击 `保存` 会打印出 base64 格式的图片地址
    这样直接存储到数据库不太友好
    也会出现字符太长的情况。
    所以要转换成普通的url链接。
    后端采用node.js，需要用到 `fs` 模块
    所以要先安装 `npm install fs `
    然后直接看代码吧

var express = require('express');
var router = express.Router();
var fs = require('fs');

router.post('/upload', function (req, res) {
  //接收前台POST过来的base64
  var imgData = req.body.imgData;
  //过滤data:URL
  var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  var dataBuffer = new Buffer(base64Data, 'base64');
  //图片存储的位置，以及设置一个随机的名字
  var url = `public/images/${Math.random().toString(36).slice(-8)}.png`
  fs.writeFile(url, dataBuffer, function (err) {
    if (err) {
      res.send(err);
    } else {
      //保存成功后，返回图片的url，这里要根据实际情况进行拼接
      res.json({ msg: '保存成功', url: "http://chenruixxxeng.info/api_test/" + url })
    }
  });
});
module.exports = router;

我们用postman来测试一下，直接看效果吧

image.png

返回给前端的url拿到了，然后渲染到页面上不就顺理成章了吗
然后前端带着url和其他参数一起post到后端，存储到数据库就ok了

##新增##
  3.前端传给后端的base64格式的文件过大，报错413
    意思就是传给后端的文件太大了，node默认接收的数据大小是200kb
    所以，不废话直接看解决方案吧
    
    在app.js中新增
    1. express 4.0 前版本
        app.use(express.json({limit: '50mb'}));
        app.use(express.urlencoded({limit: '50mb'}));
    2. express 4.0后版本
        //别忘了安装body-parser中间件  npm install body-parser
        var bodyParser = require('body-parser'); 
        app.use(bodyParser.json({limit: '50mb'}));
        app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

然后就完美解决问题了