Canvas needs to be converted into Blob first to save pictures

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) // Enlarge the canvas several times and put it in a smaller container. Width = w * scale canvas2.height = h * scale canvas2.style.width = w + 'px' canvas2.style.height = h + 'px' // You can do what you want, 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) {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', }) },Copy the code

Blob needs to be converted to File when uploading OSS

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

Upload the oss

Async ossSign(list) {// upload oss const res = await this.$axios.post(getOssSign, this.ossConfig) const promiseArr = [] // for (let i = 0; i < list.length; 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: 'Upload failed, please re-upload ', //})}},Copy the code