移动端h5 web端html 电子签名、 html转成图片保存至后端

使用场景：

1. 用户需要扫一个二维码， 弹出输入框，输入用户名， 生成相应用户责任状。

2. 在责任状底下要有能电子签名功能。

3. 并将责任状页面转成图片 传给后端保存。

---

1: 用户需要扫一个二维码， 弹出输入框，输入用户名， 生成相应用户责任状。

1. install qrcodejs2 的插件包

npm install --save qrcodejs2

2. 导入

import QRCode from 'qrcodejs2'

3. html:

4. js:

export default {

  name: 'ewm',

  data () {

    return {

      ewmurl: ''

    }

  },

  components: {

    QRCode

  },

  mounted () {

    this.ewmurl = window.location.origin + '/#/zrz' //要跳转的系统页面

    this.creatQrCode(this.ewmurl)

  },

  methods: {

    creatQrCode (url) {

      console.log(url)

      var qrcode = new QRCode('qrcode', {

        text: url, // 需要转换为二维码的内容

        width: 700,

        height: 700,

        correctLevel: QRCode.CorrectLevel.H

      })

    }

  }

}

2:在责任状底下要有能电子签名功能。

1. html

          

          

            清空签名

            确认签名

            取消

          
         

            
        

        

2. js methods中的方法

     open () {

      // 打开签名面板

      this.dialogVisible = true

      this.initPanel()

    },

    initPanel () {

      // 初始化

      this.$nextTick(() => {

        const c = this.$refs.canvas

        this.stage_info = c.getBoundingClientRect()

        c.width = this.stage_info.width

        c.height = this.stage_info.height

        const ctx = c.getContext('2d')

        ctx.strokeStyle = 'black'

        ctx.lineWidth = 3

        ctx.lineCap = 'round'

        if (this.value) {

          const image = new Image()

          image.src = this.image_src

          image.onload = function () {

            ctx.drawImage(image, 0, 0)

          }

        }

        c.focus()

      })

    },

    clearPanel () {

      // 清空签名

      this.$nextTick(() => {

        const el = this.$refs['canvas']

        const ctx = el.getContext('2d')

        ctx.clearRect(0, 0, el.width, el.height)

      })

    },

    confirm () {

      // 确认签名

      this.$nextTick(() => {

        try {

          const canvas = this.$refs['canvas']

          const signatureimg = document.createElement('img')

          signatureimg.src = canvas.toDataURL()

          const blank = document.createElement('canvas') // 创建一个空canvas对象

          blank.width = canvas.width

          blank.height = canvas.height

          if (canvas.toDataURL() === blank.toDataURL()) {

            this.$message.error('签字格式不正确')

          } else {

            // 执行所需操作

            this.$refs.signaturebox.innerHTML = ''

            // 这边不能用canvas，用了就不能在次使用这个签名弹窗了  因为内容被移走了 所以把要用的挪到图片里

            this.$refs.signaturebox.appendChild(signatureimg)

            this.telInput = false

            this.dialogVisible = false

          }

        } catch (e) {

          console.warn(e)

        }

      })

    },

    mStart (e) {

      // 触摸开始

      const el = e.target || e.srcElement

      this.ctx = el.getContext('2d')

      var x = e.touches[0].clientX - e.target.offsetLeft * 1

      var y = e.touches[0].clientY - e.target.offsetTop * 2.1 // 获取触摸点在画板（canvas）的坐标

      this.point.x = x

      this.point.y = y

      this.ctx.beginPath()

      this.moving = true

    },

    mMove (e) {

      // 滑动中

      if (this.moving) {

        let x = e.touches[0].clientX - e.target.offsetLeft * 1

        let y = e.touches[0].clientY - e.target.offsetTop * 2.1 // 获取触摸点在画板（canvas）的坐标，可能不太精准，需要调整

        this.ctx.moveTo(this.point.x, this.point.y) // 把路径移动到画布中的指定点，不创建线条(起始点)

        this.ctx.lineTo(x, y) // 添加一个新点，然后创建从该点到画布中最后指定点的线条，不创建线条

        this.ctx.stroke() // 绘制

        this.point.x = x

        this.point.y = y // 重置点坐标为上一个坐标

      }

    },

    // 滑动结束

    mEnd () {

      if (this.moving) {

        this.ctx.closePath() // 停止绘制

        this.moving = false // 关闭绘制开关

      }

    },

3:并将责任状页面转成图片 传给后端保存。

1. 导入插件包 html2canvas

npm install --save html2canvas

2. 引入

import html2canvas from 'html2canvas'

3. js

   saveZrz () {

     // 生成图片并保存   containboximg为要保存的标签模块

     var targetDom = this.$refs.containboximg

     var that = this

     html2canvas(targetDom).then(canvas => {

       that.canvasImageUrl = canvas.toDataURL()

       // 保存这个url，这个为接接口的方法 这边后端有要求将base64转成file格式，所以又包装了一层

       that.savaZRZ(that.canvasImageUrl)

     })

   }