vue 保存图片整张 以及单个

 <div class="content">
      <h1>{{title}}</h1>
      <el-button class="sava" type="primary" v-show="show" @click="savecanvas">保存图片</el-button>
      <div class="content-view canvas" ref="canvas"> // 用来设置图片的范围
        <router-view></router-view>
      </div>
    </div>
    <el-dialog title="保存图片" :visible.sync="dialogVisible" width="30%">
      <div>
        <span>选择类型：</span>
        <el-select v-model="value" placeholder="请选择类型">
          <el-option
            v-for="item in savemenu[a]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>
        图片名称：
        <el-input v-model="input" placeholder="请输入图片名称"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChange">确 定</el-button>
      </span>
    </el-dialog>

import html2canvas from 'html2canvas'
  savemenu: { // 数据格式
     ry: [
       { 
         value: 'all',
         label: '全部'
       },
       {
         value: 0,
         label: '传销人员统计'
       }
     ],
     jy: [
       {
         value: 'all',
         label: '全部'
       },
       {
         value: 0,
         label: 'IP和MAC地址数量统计'
       },
       {
         value: 1,
         label: '交易渠道统计'
       }
     ]
   },
   value: '',

    handleChange() {
   if (this.input) {
     if (this.value === 'all') {
       this.allPic(this.input) // 保存整张图
     } else {
       this.save(this.value, this.input) // 需要保存那个选哪个 
     }
     this.dialogVisible = false
     this.value = ''
     this.input = ''
   } else {
     this.$message.error('内容不能为空')
   }
 },
 save(index, name) {  // 传过来的value 对应echarts图表的下标 
   var canvas = document.getElementsByTagName('canvas')[index]
   var MIME_TYPE = 'image/png'
   var imgURL = canvas.toDataURL(MIME_TYPE)
   var dlLink = document.createElement('a')
   dlLink.download = name
   dlLink.href = imgURL
   dlLink.dataset.downloadurl = [
     MIME_TYPE,
     dlLink.download,
     dlLink.href
   ].join(':')
   document.body.appendChild(dlLink)
   dlLink.click()
   document.body.removeChild(dlLink)
 },
 allPic(name) {
   let canvas = document.querySelector('.canvas')
   let that = this
   html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
     function (canvas) {
       let type = 'png'
       let imgData = canvas.toDataURL(type)
       // 照片格式处理
       let _fixType = function (type) {
         type = type.toLowerCase().replace(/jpg/i, 'jpeg')
         let r = type.match(/png|jpeg|bmp|gif/)[0]
         return 'image/' + r
       }
       imgData = imgData.replace(_fixType(type), 'image/octet-stream')
       let filename = name + '.' + type
       that.saveFile(imgData, filename)
     }
   )
 },

  <div class="content">
        <div class="divBtn" v-show="show">
          <el-button class="sava" type="primary" @click="generateImage">保存图片</el-button>
        </div>
        <div class="content-view canvas">
          <router-view ref="canvas1"></router-view>
        </div>
      </div>

//	整张大截图 
   generateImage() {
      const loading = this.$loading()
      html2canvas(this.$refs.canvas1.$el, {
        height: this.$refs.canvas1.$el.getBoundingClientRect().height + 50
      }).then((canvas) => {
       // 两种写法 1.
        // canvas.toBlob((blob) => {
        //   this.imgUrl = URL.createObjectURL(blob)
        //   const aImg = document.createElement('a')
        //   console.log(aImg)
        //   aImg.href = this.imgUrl
        //   aImg.download = '保存图片'
        //   document.body.appendChild(aImg)
        //   aImg.click()
        //   document.body.removeChild(aImg)
        // }, 'image/png')
        // 2.
        canvas.toBlob((blob) => {
          let imgData = canvas.toDataURL('image/png')
          let file2 = new File([blob], 'test.png', { type: 'image/png' })
          let formData = new FormData()
          formData.append('file', file2)
          axios({
            method: 'post',
            url: `${API_HOST}/case/savePhoto`,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: formData
          })
            .then((res) => {
              setTimeout(() => loading.close(), 3000)
              if (res.status === 200) {
                this.$message.success('上传成功')
              }
            })
            .catch((err) => console.log(err))
          this.saveFile(imgData, this.downname + '.png')
        })
      })
    },
    // 保存单张图片
    savecanvas() {
      html2canvas(this.$refs.canvas, {
        backgroundColor: null
      }).then((canvas) => {
        canvas.toBlob((blob) => {
          let imgData = canvas.toDataURL('image/png')
          let file2 = new File([blob], 'test.png', { type: 'image/png' })
          let formData = new FormData()
          formData.append('file', file2)
          formData.append('caseId', 3)
          axios({
            method: 'post',
            url: `${API_HOST}/case/savePhoto`,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: formData
          })
            .then((res) => {
              if (res.status === 200) {
                this.$message.success('上传成功')
              }
            })
            .catch((err) => console.log(err))
          this.saveFile(imgData, Date.now() + '.png')
        })
      })
      // let canvas = document.querySelector('.canvas')
      // let that = this
      // html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
      //   function (canvas) {
      //     let type = 'png'
      //     let imgData = canvas.toDataURL(type)
      //     let formdata = new FormData()
      //     formdata.append(
      //       'file',
      //       that.toImgStyle(imgData, Date.now() + '.png'),
      //       'caseId',
      //       3
      //     )
      //     let filename = '保存图片' + '.' + type
      //     console.log(formdata, 'formdata')
      //     axios({
      //       method: 'post',
      //       url: `http://192.168.2.19:8888/case/savePhoto`,
      //       headers: {
      //         'Content-Type': 'application/x-www-form-urlencoded'
      //       },
      //       data: formdata
      //     }).then((res) => {
      //       console.log('res', res)
      //     })
      //     that.saveFile(imgData, filename)
      //   }
      // )
    },
    toImgStyle(dataURI) {
      var byteString = atob(dataURI.split(',')[1])
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
      var ab = new ArrayBuffer(byteString.length)
      var ia = new Uint8Array(ab)
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ab], { type: mimeString })
    },
    saveFile(data, filename) {
      let save_link = document.createElementNS(
        'http://www.w3.org/1999/xhtml',
        'a'
      )
      save_link.href = data
      save_link.download = filename

      let event = document.createEvent('MouseEvents')
      event.initMouseEvent(
        'click',
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      )
      save_link.dispatchEvent(event)
    }

保存整张图片 包括超出部分 长截图

		  <div class="content-view canvas">
               <router-view ref="canvas1"></router-view>
          </div>

  		// 点击保存图片
 		savePicture(){
 		html2canvas(this.$refs.canvas1.$el, {
        height: this.$refs.canvas1.$el.getBoundingClientRect().height + 50
     	 }).then((canvas) => {
        canvas.toBlob((blob) => {
          const imgData = canvas.toDataURL('image/png')
          const file2 = new File([blob], this.downname + '.png', {
            type: 'image/png'
          })
          const formData = new FormData()
          formData.append('file', file2) // 用来给后台传图片
         this.saveFile(imgData, this.downname + '.png')
         })}

	   // 
	  saveFile(data, filename) {
      const aImg = document.createElement('a')
      aImg.href = data
      aImg.download = filename
      document.body.appendChild(aImg)
      aImg.click()
      document.body.removeChild(aImg)
    }