canvas开发项目总结

canvas绘图

1. 对canvas设置宽高，只能通过属性设置。使用css设置宽高会让canvas变形

let gameCanvas = document.getElementById('gameCanvas')
this.ctxWidth = document.documentElement.clientWidth
this.ctxHeight = document.documentElement.clientHeight
gameCanvas.width = this.ctxWidth
gameCanvas.height = this.ctxHeight

2. 开发手机端页面，需要考虑在canvas绘制图片的清晰度问题。可以使用hidpi-canvas插件。
   该插件对于在canvas中绘制各种形状会自动进行高清处理，但是图片需要自己手动乘以设备像素比（devicePixelRatio）
   npm地址：https://www.npmjs.com/package/hidpi-canvas

import 'hidpi-canvas/dist/hidpi-canvas.min.js'
data () {
    return {
        pixelRatio:1 //通过计算获取设备像素比
    }
}
mounted(){
    this.getPixelRatio()
}
methods: {
    getPixelRatio(){
      let backingStore = this.ctx.backingStorePixelRatio ||
              this.ctx.webkitBackingStorePixelRatio ||
              this.ctx.mozBackingStorePixelRatio ||
              this.ctx.msBackingStorePixelRatio ||
              this.ctx.oBackingStorePixelRatio ||
              this.ctx.backingStorePixelRatio || 1
      this.pixelRatio = (window.devicePixelRatio || 1) / backingStore
    },
    drawImg(){
        // 绘制矩形框
        this.drawDashRect(this.ctx,item.x-1,item.y-1,item.width+2,item.height+2)
        // 绘制图片
        this.ctx.drawImage(this.clearIcon, (item.x - 12) * this.pixelRatio, (item.y - 12) * this.pixelRatio, 24 * this.pixelRatio, 24 * this.pixelRatio)
    }
}

3. 对canvas需要进行touch事件处理时，需要禁止页面滚动和一些浏览器默认行为（比如微信的顶部下拉，ios浏览器的橡皮筋效果等）

mounted(){
    document.body.addEventListener('touchmove' , (e) => {
      e.preventDefault()
    })
}

手机端调用相机

通过input type='file'来唤起相机，通过该标签的change事件处理图片

与冰淇淋合影
methods: {
    clearFile(){  //点击的时候就清空input，防止上传图片不变清空触发不了change事件
      let file = document.getElementById('upload')
      file.value = ''
    },
    getCameraFile(){
      let fileInput = document.getElementById('upload')
      if (fileInput.files && fileInput.files[0]) {
        let vue_this = this
        // Exif插件用来获取图片的详细信息
        Exif.getData(fileInput.files[0], function() {
          Exif.getAllTags(this)
          let Orientation = Exif.getTag(this, 'Orientation')  //Orientation是图片的旋转类型
          let reader = new FileReader()
          reader.onload = (e) => {
            // 此处写后续的相关处理
            vue_this.cameraImg.src = e.target.result
            vue_this.createPhoto(Orientation)
            vue_this.createIce()
          }
          reader.readAsDataURL(fileInput.files[0])
        })
      }
    }
}

Exif插件处理手机拍照图片的旋转问题

在使用手机竖屏拍照时，把拍的照片直接拿过来用，发现图片经常是旋转的。可以通过Exif插件来处理一下。
npm地址：https://www.npmjs.com/package/exif-js

import Exif from 'exif-js'
methods: {
    getCameraFile(){
      let fileInput = document.getElementById('upload')
      if (fileInput.files && fileInput.files[0]) {
        let vue_this = this
        // Exif插件用来获取图片的详细信息
        Exif.getData(fileInput.files[0], function() {
          Exif.getAllTags(this)
          let Orientation = Exif.getTag(this, 'Orientation')  //Orientation是图片的旋转类型
          let reader = new FileReader()
          reader.onload = (e) => {
            // 此处写后续的相关处理
            vue_this.cameraImg.src = e.target.result
            vue_this.createPhoto(Orientation)
            vue_this.createIce()
          }
          reader.readAsDataURL(fileInput.files[0])
        })
      }
    },
    // 针对不同的旋转角度进行绘图
    createPhoto(Orientation){
      this.cameraImg.onload = () => {
        let canvas = document.getElementById('cameraCanvas')
        canvas.width = this.ctxWidth
        canvas.height = this.ctxHeight
        this.photoCtx = canvas.getContext('2d')
        this.photoCtx.save()
        if(Orientation && Orientation != 1){
          switch(Orientation){
            case 6:     // 旋转90度
                this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.width / this.cameraImg.height))
                canvas.width = this.photoHeight
                canvas.height = this.ctxWidth
                this.photoCtx.rotate(Math.PI / 2)
                // (0,-imgHeight) 从旋转原始图那里获得的起始点
                this.photoCtx.drawImage(this.cameraImg, 0, -this.photoHeight, this.ctxWidth, this.photoHeight)
                this.photoCtx.restore()
                break
            case 3:     // 旋转180度
                this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.height / this.cameraImg.width))
                canvas.height = this.photoHeight
                this.photoCtx.rotate(Math.PI)
                this.photoCtx.drawImage(this.cameraImg, -this.ctxWidth, -this.photoHeight, this.ctxWidth, this.photoHeight)
                this.photoCtx.restore()
                break
            case 8:     // 旋转-90度
                this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.width / this.cameraImg.height))
                canvas.width = this.photoHeight
                canvas.height = this.ctxWidth
                this.photoCtx.rotate(3 * Math.PI / 2)
                this.photoCtx.drawImage(this.cameraImg, -this.ctxWidth, 0, this.ctxWidth, this.photoHeight)
                this.photoCtx.restore()
                break
          }
        } else{
          this.photoHeight = this.ctxHeight
          this.photoCtx.drawImage(this.cameraImg, 0, 0, this.ctxWidth*this.pixelRatio, this.ctxHeight*this.pixelRatio)
        }
        this.photoImg.src = canvas.toDataURL()
      }
    },
}

上传图片到后台

直接向后台传base64格式的图片会因为图片太大等原因而报错，可以通过传附件的形式向后台传输。

methods：{
    save(){
      if (this.isSaved) {
        Toast('请扫描二维码保存图片！')
        return
      }
      // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
      let imgdata=this.finalImg.split(',')[1]
      imgdata = window.atob(imgdata)
      let ia = new Uint8Array(imgdata.length)
      for (var i = 0; i < imgdata.length; i++) {
        ia[i] = imgdata.charCodeAt(i)
      }
      // canvas.toDataURL 返回的默认格式就是 image/png
      let blob = new Blob([ia], {type:"image/jpeg"})
      let fd = new FormData()
      fd.append('file',blob)
      this.$http.post('/api/hgds/image/uploadFile', fd, { headers: { 'Content-Type':'multipart/form-data' } }).then((data) => {
        //this.$http.post('/apis/hgds/image/uploadFile', fd, { headers: { 'Content-Type':'multipart/form-data' } }).then((data) => {
        this.ewmVisible = true
        this.ewmImg = data.qrcodeImgUrl
        this.isSaved = true
      })
    }
}