npm i html2canvas
在文件中引入中资源
import html2canvas from ‘html2canvas’
image() {
html2canvas(this.$refs.workingarea, {
//allowTaint: true是否允许跨域
//useCORS:true是否尝试加载跨源图像作为CORS服务,在返回到代理(用来解决图片跨域加载题)
//width,height,宽高
allowTaint:true,
width:1200,
height:500,
useCORS: true,
backgroundColor: null, // null 表示设置背景为透明色
}).then((canvas) => {
//图片放到页面中
//document.querySelector("#box1").appendChild(canvas)
//图片放到image的src中展示
//document.getElementById("test").src= canvas.toDataURL();
// 生成图片成功
canvas.toBlob((blob) => {
//let url=URL.createObjectURL(blob)
//document.getElementById("test").src=url
let filename = `${new Date().getTime()}.jpg`
let file2 = new File([blob], filename, { type: 'image/jpg' })
let formData = new FormData()
formData.set('file', file2)
//上传到服务器
uploadFileRequest(formData).then((res) => {
console.log(res.data.link)
if (res.code !== 200) {
return this.$message.error('生成图片失败')
}
this.$message({
message: '图片生成成功!',
type: 'success',
})
this.styleUrl = res.data.link
})
})
})
}
如果是使用image标签则在img标签内加入crossorigin=‘anonymous’(crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求)并给html2canvas设置allowTaint: true配置