canvas在图片上标记后保存到后台

后端接收保存代码

    @PostMapping("/upload")
    public R getFile(@RequestPart("file") MultipartFile file) throws IOException {
        FileUtil.writeFromStream(file.getInputStream(),FileUtil.file("G:\\cyn\\项目\\云天\\bak\\1.png"));
        System.out.println(file.getOriginalFilename());
        return R.ok();
    }

前端代码

<template>
  <div>


    <canvas id="canvas" style="border:solid 1px #ccc"></canvas>
    <div class="box">
      <!--      <a href="javascript:;" class="btn-clear" id="btnClear">清空</a>-->
      <el-button type="primary" icon="el-icon-search" size="mini" @click="btnClear">清空</el-button>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { demoUpload } from '@/api/demo/demo'

  export default {
    data() {
      return {
        jishuNUm: 0,
        img: new Image(),
        drawInfo: []
      }
    },
    mounted() {
      this.testCan()
    },
    methods: {
      handle(e, ctx) {
        var e = e || window.event
        console.log(e, '11111111111111111')
        var x1 = e.clientX - canvas.getBoundingClientRect().left,
          y1 = e.clientY - canvas.getBoundingClientRect().top
        if (this.jishuNUm > 0) {
          this.$message({
            showClose: true,
            message: '只能点击一次，请清空后重新选择',
            type: 'warning'
          });
          return
        }
        let lineSize = 10
        let lineColor = '#ff0000'
        this.jishuNUm = 0
        this.jishuNUm = this.jishuNUm + 1

        console.log(lineColor)
        ctx.beginPath()
        ctx.fillStyle = lineColor
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'
        ctx.arc(x1, y1, lineSize, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()
        canvas.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      testCan() {
        var canvas = document.getElementById('canvas'),
          ctx = canvas.getContext('2d'),
          // btnClear = document.getElementById('btnClear'),
          btnSave = document.getElementById('btnSave'),
          canvasWidth = 800,
          canvasHeight = 600
        this.img.setAttribute('crossOrigin', 'Anonymous')
        //背景图片
        this.img.src = 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
        this.img.onerror = () => {
          var timeStamp = +new Date()
          this.img.src = this.url + '?' + timeStamp
        }

        canvas.setAttribute('width', canvasWidth)
        canvas.setAttribute('height', canvasHeight)
        ctx.drawImage(this.img, 0, 0, canvasWidth, canvasHeight)
        console.log(this.jishuNUm)
        canvas.addEventListener('mousedown', e => this.handle(e, ctx), true)


      },
      dataURLtoBlob(base64Data) {
        let tmp = base64Data.split(',')
        if (tmp.length === 2) { // 如果base64包含头部的话，去掉base64的头
          tmp.shift()
        }
        var bytes = window.atob(tmp) // 转换为byte;
        // 处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length)
        var ia = new Uint8Array(ab)
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i)
        }
        return new window.Blob([ab], { type: 'image/png' })
      },
      //保存 base64转blob
      btnSave() {
        var canvas = document.getElementById('canvas')
        var imgData = canvas.toDataURL({ format: 'png', quality: 1, width: 800, height: 600 })
        var strDataURI = imgData.substr(22, imgData.length).replace(/%0A|\s/g, '')
        let blob = this.dataURLtoBlob(strDataURI)
        let fileOfBlob = new File([blob], new Date() + '.jpg')
        var formData = new FormData()
        formData.append('file', fileOfBlob)
        //上传图片
        demoUpload(formData).then(res => {
          console.log(res, 'rrrrrrrr')
        })
      },
      //清除
      btnClear() {
        var canvas = document.getElementById('canvas'),
          ctx = canvas.getContext('2d'),
          canvasWidth = 800,
          canvasHeight = 600
        console.log(canvas)
        this.jishuNUm = 0
        ctx.clearRect(0, 0, canvasWidth, canvasHeight)
        ctx.drawImage(this.img, 0, 0, canvasWidth, canvasHeight)
      },
      jumpmenu(url) {
        console.log(url)
        this.$router.push(url)
      }
    }
  }
</script>
<style scoped>
  body, dl, dd, h1, h2, h3, h4, h5, h6, p, form {
    margin: 0;
  }

  ol, ul, input {
    margin: 0;
    padding: 0;
  }

  body, button, input, select, textarea {
    font: 14px/1.5 \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif;
    outline: none;
  }

  ul, ol {
    list-style: none;
  }

  a {
    text-decoration: none;
    outline: 0 none;
    color: #999;
  }

  img {
    border: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .btn-clear, .btn-save {
    width: 100px;
    height: 42px;
    line-height: 42px;
    background: #009cff;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    text-align: center;
  }

  #canvas {
    margin: 0 auto;
    display: block;
    cursor: crosshair;

  }

  .box {
    text-align: center;
    margin: 10px 0 0;
  }

  .box li {
    margin: 0 0 10px;
  }
</style>