canvas 保存图片上传oss

1,224 阅读1分钟

canvas保存图片需要先转成Blob

     defineImg() {
     保存图片
      var canvas2 = document.createElement('canvas')
      let _canvas = this.$refs.refCanvas
      var scale = window.devicePixelRatio // Change to 1 on retina screens to see blurry canvas.
      var w = parseInt(window.getComputedStyle(_canvas).width)
      var h = parseInt(window.getComputedStyle(_canvas).height)
      //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
      canvas2.width = w * scale
      canvas2.height = h * scale
      canvas2.style.width = w + 'px'
      canvas2.style.height = h + 'px'
      //可以按照自己的需求,对context的参数修改,translate指的是偏移量   0.9375
      var context = canvas2.getContext('2d')

      // Normalize coordinate system to use css pixels.
      context.scale(1, 1)
      html2canvas(this.$refs.refCanvas, {
        canvas: this.$refs.refCanvas,
        backgroundColor: null,
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then(async (canvas) => {
        let blob = this.getBlob(canvas)
        var fileName = '作业图片'
        // this.downloadFile(blob, fileName)
        let fileOfBlob = new window.File([blob], this.imgObject.fileName, {
          type: this.imgObject.fileType,
        })
        let fileUploadInfo = await this.ossSign(fileOfBlob)
        console.log(fileUploadInfo)
      })
    },
    getBlob(canvas) {
      //获取blob对象
      var data = canvas.toDataURL('image/png', 1)
      this.picdown = data
      data = data.split(',')[1]
      data = window.atob(data)
      var ia = new Uint8Array(data.length)
      for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i)
      }
      return new Blob([ia], {
        type: 'image/png',
      })
    },

上传oss时Blob需要转成File

let fileOfBlob = new window.File([blob], this.imgObject.fileName, {
      type: this.imgObject.fileType,
    })

上传oss

     async ossSign(list) {
      // 上传oss
      const res = await this.$axios.post(getOssSign, this.ossConfig)
      const promiseArr = []
      // for (let i = 0; i < list.length; i++) {//如果多个图片上传oss
      const fileName = list.name
      const formatFile = formatUploadFile(list, res.data.data, fileName)
      const resp = this.$axios.post(res.data.data.host, formatFile, {
        headers: { 'Content-Type': 'multipart/form-data' },
        withCredentials: false,
      })
      promiseArr.push(resp)
      // }
      try {
        const fileList = await Promise.all(promiseArr).then((arr) => {
          return `${res.data.data.dir}/${this.imgObject.fileName}`
        })
        return { fileList, uuid: res.data.data.dir.split('/')[1] }
      } catch (error) {
        console.log(error)
        // this.$Message.error({
        //   content: '上传失败,请重新上传',
        // })
      }
    },