ios 有时候无法签名 about canvas-draw HOT 36 OPEN

// 页面Page1.vue
 <div>
    <div id="canvasBox" :style="getHorizontalStyle">
      <div class="greet">
        <span>{{msg}}</span>
        <input type="button" value="清屏" @touchstart="clear" @mousedown="clear"/>
        <!-- <input type="button" value="生成png图片" @touchstart="savePNG" @mousedown="savePNG"/> -->
      </div>
      <canvas></canvas>
    </div>
    <!-- <div class="image-box" v-show="showBox">
      <header>
        请长按图片并保存至本地后发送好友
        <input type="button" value="返回" @click="showBox = false"/>
      </header>
      <img :src="signImage">
    </div> -->
  </div>

this.$router.push({name: 'page1'})

vue.esm.js:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: canvas

vue版本是： 2.5.2

<template>
  <div class="container">
    <div id="canvasBox" :style="getHorizontalStyle" v-show="!showBox">
      <div class="greet">
        <span>{{msg}}</span>
        <input type="button" value="清屏" @touchstart="clear" @mousedown="clear"/>
        <input type="button" value="生成png图片" @touchstart="savePNG" @mousedown="savePNG"/>
      </div>
      <canvas></canvas>
    </div>
    <div class="image-box" v-show="showBox">
      <header>
        请长按图片并保存至本地后发送好友
        <input type="button" value="返回" @click="showBox = false"/>
      </header>
      <img :src="signImage">
    </div>
  </div>
</template>

<script>
import Draw from '../components/draw'

export default {
  name: 'canvas',
  data () {
    return {
      msg: '请在下方空白处签名',
      degree: 90,
      signImage: null,
      showBox: false
    }
  },
  components: {
    Draw
  },
  beforeCreate () {
    document.title = '手写签名'
  },
  mounted () {
    this.$store.dispatch('UpdateShowHeader', true)
    this.$store.dispatch('UpdateShowTabbar', false)
    this.canvasBox = document.getElementById('canvasBox')
    this.initCanvas()
  },
  computed: {
    getHorizontalStyle () {
      const d = document
      const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth
      const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight
      let length = (h - w) / 2
      let width = w
      let height = h

      switch (this.degree) {
        case -90:
          length = -length
        /* eslint no-fallthrough: "error" */
        case 90:
          width = h
          height = w
          break
        default:
          length = 0
      }
      if (this.canvasBox) {
        this.canvasBox.removeChild(document.querySelector('canvas'))
        this.canvasBox.appendChild(document.createElement('canvas'))
        /* eslint  vue/no-async-in-computed-properties: "off" */
        setTimeout(() => {
          this.initCanvas()
        }, 200)
      }
      return {
        transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
        width: `${width}px`,
        height: `${height}px`,
        transformOrigin: 'center center'
      }
    }
  },
  methods: {
    initCanvas () {
      const canvas = document.querySelector('canvas')
      this.draw = new Draw(canvas, -this.degree)
    },
    clear () {
      this.draw.clear()
    },
    download () {
      this.draw.downloadPNGImage(this.draw.getPNGImage())
    },
    savePNG () {
      this.signImage = this.draw.getPNGImage()
      this.showBox = true
    },
    upload () {
      const image = this.draw.getPNGImage()
      const blob = this.draw.dataURLtoBlob(image)

      const url = ''
      const successCallback = (response) => {
        console.log(response)
      }
      const failureCallback = (error) => {
        console.log(error)
      }
      this.draw.upload(blob, url, successCallback, failureCallback)
    }
  }
}

</script>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  #canvasBox {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .greet {
    padding: 20px;
    font-size: 20px;
    user-select: none;
  }
  input {
    font-size: 20px;
  }
  .greet select {
    font-size: 18px;
  }
  canvas {
    flex: 1;
    cursor: crosshair;
    border:2px dashed lightgray;
  }
  .image-box {
    width: 100%;
    height: 100%;
  }
  .image-box header{
    font-size: 18px;
  }
  .image-box img {
    max-width: 80%;
    max-height: 80%;
    margin-top: 50px;
    border: 1px solid gray;
  }
</style>

/**
 * Created by louizhai on 17/6/30.
 * description: Use canvas to draw.
 */
function Draw (canvas, degree, config = {}) {
  if (!(this instanceof Draw)) {
    return new Draw(canvas, config)
  }
  if (!canvas) {
    return
  }
  let { width, height } = window.getComputedStyle(canvas, null)
  width = width.replace('px', '')
  height = height.replace('px', '')

  this.canvas = canvas
  this.context = canvas.getContext('2d')
  this.width = width
  this.height = height
  const context = this.context

  // 根据设备像素比优化canvas绘图
  const devicePixelRatio = window.devicePixelRatio
  if (devicePixelRatio) {
    canvas.style.width = `${width}px`
    canvas.style.height = `${height}px`
    canvas.height = height * devicePixelRatio
    canvas.width = width * devicePixelRatio
    context.scale(devicePixelRatio, devicePixelRatio)
  } else {
    canvas.width = width
    canvas.height = height
  }

  context.lineWidth = 6
  context.strokeStyle = 'black'
  context.lineCap = 'round'
  context.lineJoin = 'round'
  Object.assign(context, config)

  const { left, top } = canvas.getBoundingClientRect()
  const point = {}
  const isMobile = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(navigator.userAgent)
  // 移动端性能太弱, 去掉模糊以提高手写渲染速度
  if (!isMobile) {
    context.shadowBlur = 1
    context.shadowColor = 'black'
  }
  let pressed = false

  const paint = (signal) => {
    switch (signal) {
      case 1:
        context.beginPath()
        context.moveTo(point.x, point.y)
      /* eslint no-fallthrough: "error" */
      case 2:
        context.lineTo(point.x, point.y)
        context.stroke()
        break
      default:
    }
  }
  const create = signal => (e) => {
    e.preventDefault()
    if (signal === 1) {
      pressed = true
    }
    if (signal === 1 || pressed) {
      e = isMobile ? e.touches[0] : e
      point.x = e.clientX - left
      point.y = e.clientY - top
      paint(signal)
    }
  }
  const start = create(1)
  const move = create(2)
  const requestAnimationFrame = window.requestAnimationFrame
  const optimizedMove = requestAnimationFrame ? (e) => {
    requestAnimationFrame(() => {
      move(e)
    })
  } : move

  if (isMobile) {
    canvas.addEventListener('touchstart', start)
    canvas.addEventListener('touchmove', optimizedMove)
  } else {
    canvas.addEventListener('mousedown', start)
    canvas.addEventListener('mousemove', optimizedMove);
    ['mouseup', 'mouseleave'].forEach((event) => {
      canvas.addEventListener(event, () => {
        pressed = false
      })
    })
  }

  // 重置画布坐标系
  if (typeof degree === 'number') {
    this.degree = degree
    context.rotate((degree * Math.PI) / 180)
    switch (degree) {
      case -90:
        context.translate(-height, 0)
        break
      case 90:
        context.translate(0, -width)
        break
      case -180:
      case 180:
        context.translate(-width, -height)
        break
      default:
    }
  }
}
Draw.prototype = {
  scale (width, height, canvas = this.canvas) {
    const w = canvas.width
    const h = canvas.height
    width = width || w
    height = height || h
    if (width !== w || height !== h) {
      const tmpCanvas = document.createElement('canvas')
      const tmpContext = tmpCanvas.getContext('2d')
      tmpCanvas.width = width
      tmpCanvas.height = height
      tmpContext.drawImage(canvas, 0, 0, w, h, 0, 0, width, height)
      canvas = tmpCanvas
    }
    return canvas
  },
  rotate (degree, image = this.canvas) {
    degree = ~~degree
    if (degree !== 0) {
      const maxDegree = 180
      const minDegree = -90
      if (degree > maxDegree) {
        degree = maxDegree
      } else if (degree < minDegree) {
        degree = minDegree
      }

      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      const height = image.height
      const width = image.width
      const degreePI = (degree * Math.PI) / 180

      switch (degree) {
        // 逆时针旋转90°
        case -90:
          canvas.width = height
          canvas.height = width
          context.rotate(degreePI)
          context.drawImage(image, -width, 0)
          break
        // 顺时针旋转90°
        case 90:
          canvas.width = height
          canvas.height = width
          context.rotate(degreePI)
          context.drawImage(image, 0, -height)
          break
        // 顺时针旋转180°
        case 180:
          canvas.width = width
          canvas.height = height
          context.rotate(degreePI)
          context.drawImage(image, -width, -height)
          break
        default:
      }
      image = canvas
    }
    return image
  },
  getPNGImage (canvas = this.canvas) {
    return canvas.toDataURL('image/png')
  },
  getJPGImage (canvas = this.canvas) {
    return canvas.toDataURL('image/jpeg', 0.5)
  },
  downloadPNGImage (image) {
    const url = image.replace('image/png', 'image/octet-stream;Content-Disposition:attachment;filename=test.png')
    window.location.href = url
  },
  dataURLtoBlob (dataURL) {
    const arr = dataURL.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bStr = atob(arr[1])
    let n = bStr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bStr.charCodeAt(n)
    }
    return new Blob([u8arr], { type: mime })
  },
  clear () {
    let width
    let height
    switch (this.degree) {
      case -90:
      case 90:
        width = this.height
        height = this.width
        break
      default:
        width = this.width
        height = this.height
    }
    this.context.clearRect(0, 0, width, height)
  },
  upload (blob, url, success, failure) {
    const formData = new FormData()
    const xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    formData.append('image', blob, 'sign')

    xhr.open('POST', url, true)
    xhr.onload = () => {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        success(xhr.responseText)
      } else {
        failure()
      }
    }
    xhr.onerror = (e) => {
      if (typeof failure === 'function') {
        failure(e)
      } else {
        console.log(`upload img error: ${e}`)
      }
    }
    xhr.send(formData)
  }
}
export default Draw

 getHorizontalStyle () {
      const d = document
      const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth
      const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight
      let length = (h - w) / 2
      let width = w
      let height = h

      switch (this.degree) {
        case -90:
          length = -length
        /* eslint no-fallthrough: "error" */
        case 90:
          width = h
          height = w
          break
        default:
          length = 0
      }
      if (this.canvasBox) {
        this.canvasBox.removeChild(document.querySelector('canvas'))
        this.canvasBox.appendChild(document.createElement('canvas'))
        /* eslint  vue/no-async-in-computed-properties: "off" */
        setTimeout(() => {
          console.log(`测试执行`)
          this.initCanvas()
        }, 200)
      }
      return {
        transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
        width: `${width}px`,
        height: `${height}px`,
        transformOrigin: 'center center'
      }
    }

$ cnpm i 
$ npm run start
$ 打开页面：http://127.0.0.1:3000
$ 点击“进入签名页面”按钮
$ 在对应页面画布签名不起作用
$ 刷新当前页面重新签名成功

if (this.canvasBox) {
        this.canvasBox.removeChild(document.querySelector('canvas'))
        this.canvasBox.appendChild(document.createElement('canvas'))
        /* eslint  vue/no-async-in-computed-properties: "off" */
        setTimeout(() => {
          console.log(`测试执行`)
          this.initCanvas()
        }, 100)
      }

<canvas ref="signature" style="width: 100%; height: 100%;" v-show="show"></canvas>

mounted() {
  this.init()
  setTimeout(() => {
    this.show = true
  }, 50)
}

methods: {
  init() {
    const canvas = this.$refs.signature;
    this.draw = new Draw(canvas, 0);
  }
}

  // 源码中这个width height 是 100% 而不是 px 单位的，所以我在原型上加了一个判断方法
  let { width, height } = window.getComputedStyle(canvas, null); 

  Draw.prototype = {
    isDraw() {
    // 然后在调用这个的地方判断如果是false则重新初始化一遍就可以了
      if (this.width === '100%' && this.height === '100%') return false
      ...
    }
  }