标签：画布 canvas 实现 res 电子签名 vueEsign resultImg esign

功能说明：

1. 兼容 PC 和 Mobile；
2. 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；
3. 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
4. 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5. 导出图片格式为 base64；

1. 安装使用插件===>>>  npm install vue-esign
2. main.js文件中引入 
   ​       import vueEsign from 'vue-esign'
   ​       Vue.use(vueEsign)
3. 上代码

        <template>
          <div class="home"> 
            <vue-esign
              ref="esign"
              :width="300"
              :height="300"
              :isCrop="isCrop"
              :lineWidth="lineWidth"
              :lineColor="lineColor"
              :bgColor.sync="bgColor"
            />
            <button @click="handleReset">清空画板</button>
            <button @click="handleGenerate">生成图片</button>
          </div>
        </template>

        <script>
        export default {
          data () {
            return {
              lineWidth: 6,
              lineColor: 'red',
              bgColor: '',
              resultImg: '',
              isCrop: false
            }
          },
          methods: {
            handleReset () {
              this.$refs.esign.reset()
            },
            handleGenerate () {
              this.$refs.esign
                .generate()
                .then(res => {
                  this.resultImg = res
                  console.log(res)
                })
                .catch(err => {
                  alert('hfjdksafjdksl;j') // 画布没有签字时会执行这里 'Not Signned'
                })
            }
          }
        }
        </script>
        <style lang="less" scoped>
        ::v-deep canvas[data-v-25d47434] {
          border: 1px solid red;
        }
        </style>

标签：画布,canvas,实现,res,电子签名,vueEsign,resultImg,esign
来源： https://www.cnblogs.com/lflsky-123/p/15433278.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。