canvas保存图片需要先转成Blob
defineImg() {
保存图片
var canvas2 = document.createElement('canvas')
let _canvas = this.$refs.refCanvas
var scale = window.devicePixelRatio
var w = parseInt(window.getComputedStyle(_canvas).width)
var h = parseInt(window.getComputedStyle(_canvas).height)
canvas2.width = w * scale
canvas2.height = h * scale
canvas2.style.width = w + 'px'
canvas2.style.height = h + 'px'
var context = canvas2.getContext('2d')
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 = '作业图片'
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',
})
},
上传oss时Blob需要转成File
let fileOfBlob = new window.File([blob], this.imgObject.fileName, {
type: this.imgObject.fileType,
})
上传oss
async ossSign(list) {
const res = await this.$axios.post(getOssSign, this.ossConfig)
const promiseArr = []
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)
}
},