vue使用html2canvas并上传图片-一一网

安装

import html2canvas from ‘html2canvas’

需求: 截取当前页面的一部分作为缩略图, 百度后推荐使用html2canvas, 但是使用后保存下来的base64的图片, 太大了没法直接保存数据库, 所以需要先转成blob, 接着在转成file, 这时就可以进行上传了

碰到的问题: 在导出base64后发现图片会丢失, 需要设置 useCORS: true, 并且修改下图片添加属性crossOrigin=”anonymous”, 但是这时图片会不显示, 可以在图片路径后面添加time参数

<img :src="rowData1.previewPath + '?time=' + new Date().valueOf()"
  crossOrigin="anonymous"
/>
复制代码

import html2canvas from 'html2canvas'

// 获取base64图片
getBase64() {
  html2canvas(element, {
    useCORS: true, // 是否允许跨域
    height: element.offsetHeight // 生成图片的高度
  }).then((canvas) => {
    let dataURL = canvas.toDataURL('image/png')
    let pageBlob = this.dataURLtoBlob(dataURL)
    this.uploadFile(pageBlob)
  })
}

// 将base64转成blob 为了后续能上传
dataURLtoBlob(dataurl) {
  var arr = dataurl.split(',')
  //注意base64的最后面中括号和引号是不转译的
  var _arr = arr[1].substring(0, arr[1].length - 2)
  var mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(_arr),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
    type: mime
  })
},

// 上传文件
uploadFile(file) {
  let params = new window.FormData()
  let fileOfBlob = new File([file], new Date().getTime() + '.jpg')
  params.append('file', fileOfBlob)
  Post('xxxxx/fileUpload', params).then((res) => {
    let data = res.data
    if (data.status === 0) {
      console.log(data.data.url)
    } else {
      this.$message.warning('图片保存失败，请稍后重试')
    }
  })
}
复制代码