前言：
```本项目采用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}));
然后就完美解决问题了
网友评论