代码拉取完成,页面将自动刷新
同步操作将从 海边的小溪鱼/vue-sign-canvas 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
npm i sign-canvas --save
//全局注册 main.js
import SignCanvas from 'sign-canvas';
Vue.use(SignCanvas);
//局部注册
import SC from 'sign-canvas';
components:{ SignCanvas:SC.SignCanvas }
你可以这样使用:
<template>
<div id="app">
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
<img v-if="value" class="view-image" :src="value" width="150" height="150">
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
<span id="save" @click="downloadSignImg()">下载</span>
</div>
</div>
</template>
<script>
export default {
data(){
return {
value: null,
options:{
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
isShowBorder: false, //是否显示边框 [可选]
}
}
},
methods:{
/**
* 清除画板
*/
canvasClear(){
this.$refs.SignCanvas.canvasClear();
},
/**
* 保存图片
*/
saveAsImg(){
const img = this.$refs.SignCanvas.saveAsImg();
alert(`image 的base64:${img}`);
},
/**
* 下载图片
*/
downloadSignImg(){
this.$refs.SignCanvas.downloadSignImg();
},
}
}
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.sign-canvas{
display: block;
margin: 20px auto;
border: 1px dashed #f00;
}
.view-image{
display: block;
margin: 20px auto;
}
.sign-btns{
margin: 0 auto;
display: flex;
justify-content: space-between;
#clear,
#clear1,
#save {
display: inline-block;
padding: 5px 10px;
width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
}
</style>
props:{
options: { //配置项
required: false,
type: [Object],
default: () => null
}
}
// 1. options [Object] 可选,非必传
// 2. v-model [String] 可选,非必传
{
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'round', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 600, //canvas宽高 [Number] 可选
canvasHeight: 600, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选] 当签名模式处于false的时候此选项才生效
bgColor: '#fcc', //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: '#101010', // 轨迹颜色 [String] 可选
isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
//清除画布 无返回值 [Void]
this.$refs.SignCanvas.canvasClear();
//获取base图片 返回图片的base64编码 [String]
this.$refs.SignCanvas.saveAsImg();
//下载图片到本地, 调用内置的下载图片方法,默认将图片保存为png格式(经测试在部分微信内置浏览器中无效)
this.$refs.SignCanvas.downloadSignImg();
初始化展示
非签名模式书写展示
保存展示
下载的图片展示
签名模式的图片展示
git clone https://github.com/langyuxiansheng/vue-sign-canvas.git
cd vue-sign-canvas
npm install
npm run dev
npm run build
npm run lint
目前还没有撤销回到上一步的操作,一旦输入错了就只有清除重写了(这个是之前去银行的时候,那个签名板是这样设计的); 如果有需要还是可以考虑加上回到上一步的方法.
v1.0.6 修复多个canvas无法同时存在的bug,修复移动端滚动后影响绘制轨迹的bug。感谢网友“hytao2017”的反馈。
v1.0.5 优化部分代码。
v1.0.4 修复增加局部注册引入方式。
v1.0.3 修复“在移动端时,如果标签距离左侧有间距, 画笔和绘制的内容有偏移 #4”的bug,感谢网友“xiaohuyahappy ”和“tzy19920902”的bug反馈见及修复建议。
v1.0.2 兼容移动端的可用性
v1.0.1 修复无法清空的bug
v1.0.0 注册发布到npmjs
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。