html2canvas实现生成图片以及易出错点

时间：2023-02-15 11:06:45

html2canvas 将html元素转为图片

html2canvas(element，options).then((canvas) =>{})

基本使用

  • 参数

scale：缩放比例,默认为1 allowTaint：是否允许跨域图像污染画布，默认为false useCORS：是否尝试使用CORS从服务器加载图像，默认为false width：canvas画布的宽度,默认为jQuery对象的宽度 height：canvas画布的高度,默认为jQuery对象的高度 backgroundColor：/画布的背景色，默认为透明(#fff),参数可以为#表示的颜色，也可以使用rgba

  • 忽略某元素 在某元素加上以下属性信息即可


  • 安装


npm install html2canvas


  • 使用


html2canvas(this.$refs.imageDom, { backgroundColor: null, useCORS: true }).then(canvas => {
     //延迟执行确保万无一失，玄学
    setTimeout(() => {
    //转成图片，生成图片地址
         this.createFile(canvas.toDataURL("image/png"))//可将 canvas 转为 base64 格式
          }, 0)
      }).catch(error => {
    });


易错点


  1. 生成图片区域中的dom元素中有img标签，生成图片后，img图片加载不出来


    

  • 添加useCORS:true属性；
    • 

  • 给要生成canvas的DOM中包含的每一个img标签添加crossorigin="anonymous"属性；
    • 

  • 确保你的图片CDN服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头。
    • 



    

  1. 不支持box-show、box-radius
    2. 

  2. 生成图片背景色异常，需要在异常的背景色处的dom块元素，设置背景色，一般设置为白色
    3. 



标签：
相关文章