• 售前

  • 售后

热门帖子
入门百科

使用vue实现手写署名功能

[复制链接]
却写杂布计 显示全部楼层 发表于 2021-8-14 14:49:12 |阅读模式 打印 上一主题 下一主题
个人实现截图:

安装:
  1. npm install vue-esign --save
复制代码
使用:
1.在main.js中引入
  1. import vueEsign from 'vue-esign'
  2. Vue.use(vueEsign)
复制代码
2.在页面中引用
  1. <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
  2. <button @click="handleReset">清空画板</button>
  3. <button @click="handleGenerate">生成图片</button>
复制代码
3.说明
            属性            类型            默认值            说明                                    width            Number            800            画布宽度,即导出图片的宽度                            height            Number            300            画布高度,即导出图片的高度                            lineWidth            4            Number            画笔粗细                            lineColor            String            #000000            画笔颜色                            bgColor            String            空            画布配景致,为空时画布配景透明,
            支持多种格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0,0,0,.6)','red'                            isCrop            Boolean            false            是否裁剪,在画布设定尺寸基础上裁掉四周空白部门        等候已久,上原码:
  1. data () {
  2.   return {
  3.     lineWidth: 6,
  4.     lineColor: '#000000',
  5.     bgColor: '',
  6.     resultImg: '',
  7.     isCrop: false
  8.   }
  9. },
  10. methods: {
  11.   handleReset () {
  12.     this.$refs['esign'].reset() //清空画布
  13.   },
  14.   handleGenerate () {
  15.     this.$refs['esign'].generate().then(res => {
  16.       this.resultImg = res // 得到了签字生成的base64图片
  17.     }).catch(err => { //  没有签名,点击生成图片时调用
  18.       this.$message({
  19.         message: err + ' 未签名!',
  20.         type: 'warning'
  21.       })
  22.       alert(err) // 画布没有签字时会执行这里 'Not Signned'
  23.     })
  24.   }
  25. }
复制代码
:将base64转化成图片方法:​​​​​​​
  1. // 将base64,转换成图片
  2. base64ImgtoFile(dataurl, filename = 'file') {
  3. const arr = dataurl.split(',')
  4. const mime = arr[0].match(/:(.*?);/)[1]
  5. const suffix = mime.split('/')[1]
  6. const bstr = atob(arr[1])
  7. let n = bstr.length
  8. const u8arr = new Uint8Array(n)
  9. while (n--) {
  10. u8arr[n] = bstr.charCodeAt(n)
  11. }
  12. return new File([u8arr], `${filename}.${suffix}`, {
  13. type: mime
  14. })
  15. },
复制代码
到此这篇关于使用vue实现手写签名功能的文章就先容到这了,更多相关vue实现手写签名内容请搜索草根技术分享以前的文章或继承欣赏下面的相关文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作