html2canvas生成图片资源

最新推荐文章于 2024-08-22 11:32:42 发布

kaka-333

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量485

点赞数

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/weixin_45446474/article/details/122645707

版权

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配置