Vue+html2canvas截图空白的问题

在使用vue做信网单页专题时，有海报生成的功能，这里推荐2个插件：1、html2canvas，构造好DOM然后转canvas进行截图；2、使用vue-canvas-poster（这个截止到2021年3月2日，仅支持vue2.0版本，不支持3.0，3.0版本引用的话会报错，如果选择使用请根据开发情况酌情使用，这个类似于小程序上的海报截图生成painter,链接请见文章底部）。由于我使用的是vue3所以只能无奈去踩html2canvas的坑了~~（如果条件可以的话 首推使用vue-canvas-poster）;

安装html2canvas

npm install --save html2canvas
// 项目中还使用了生成二维码的功能，所以需要先安装
npm i qrcodejs2 
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

使用以及问题

首先看一下效果图 (直接看结论：目录->划重点)

1、先引用qrcodejs2以及html2canvas插件

import html2canvas from 'html2canvas';
import QRCode from 'qrcodejs2';

2、然后书写结构

<template>
  <section :class="'playbill-card-x ' + showPlaybillCard">
    <div :class="'playbill-card ' + playbillCls" ref="playbillCard">
      <!--  主页分享 -->
      <div class="index-card">
        <div class="card-top">
            <span class="img-x">
              <img :src="billImgIndex"
                   @load="imageLoaded"
                   :data-show="billImgIndex ? true : false"
              >
            </span>
        </div>
      </div>
      <!--  主页分享 end -->
      <!-- 详细页分享 -->
      <div class="detail-card">
        <div class="detail-card-inner">
          <div class="card-top">
            <div class="img-x">
              <img :src="billImgDetail"
                   @load="imageLoaded"
                   :data-show="billImgDetail ? true : false"
              >
            </div>
            <article class="article-x">
              <h3>{{billTitle}}</h3>
              <p>{{billDesc}}</p>
              <!--  白色-透明渐变原先写在样式背景中，iosX上无效，使用img才有效 content:url(..也无效)   -->
              <!-- data => detailWhite：require(...)  -->
              <img :src="detailWhite" class="bot-white-alpha">
            </article>
          </div>
        </div>
      </div>
      <!-- 详细页分享 end -->
      <div class="news-info">
        <!--  用伪类做的圆（盖在虚线上）也不能正常显示改为元素替代  -->
        <!--  通过样式控制只有在详情页生成的时候显示   -->
        <div class="detail-circle">
          <span class="left"></span>
          <span class="right"></span>
        </div>
        <div class="info-x">
          <span class="zt-logo">
            <img :src="ztlogo" alt="信网专题">
          </span>
          <h3 class="news-title">独家视角审视青岛生活</h3>
          <p class="news-tips">长按识别二维码 阅读文章详情</p>
        </div>
        <span class="qrbox" ref="qrbox"></span>
        <span class="clear"></span>
      </div>
    </div>
  </section>
</template>

3、关键JS

这个案例中，我将详细页以及主页每次切换时的分享数据都挂载到body的data上，需要的时候就去读取：

export default {
  name: "playbill",
  data() {
    return {
      billTitle: '',
      billDesc: '',
      billImg: '',
      // 默认的图片
      billImgIndex: '',
      billImgDetail: '',
      billLink: '',
      billComponent: '',
      showCard: false,
      // 是否是在生成图片的异步操作中
      isCreating: false,
      // 用于截图的底部白色渐变
      detailWhite: require('../playbill/alpha@2x.png')
    }
  },
  computed: {
    // 根据组件选择显示的模板
    playbillCls() {
      let cls = '';
      switch (this.billComponent) {
        case 'index':
          cls = 'isIndex';
          break;
        case 'detail':
          cls = 'isDetail';
          break;
        default:
          cls = '';
      }
      return cls;
    },
    // 解决背景图片模糊的问题，使用img标签直接插入
    ztlogo() {
      return require('../playbill/zt-logo@2x.png');
    },
  },
  methods: {
    // 外部调用，开启截图
    createCard() {
      // 开始创建截图
      this.isCreating = true;
      // 当开始生成图片时，发送事件通知外部进入等待状态,同时点击关闭会失效
      this.$emit('creating', this.isCreating);
      // 获取挂载在Body上的信息（省略）
      this.getPlaybillInfo();
      // 创建二维码并实例化
      this.createQrCode();
      // 初始化之后就生成二维码
      this.qrcode.makeCode(this.billLink);
      // 异步将图片转化为base64进行返回，否则图片图片因为跨域无法截图
      this.getBase64Img();
    },
    // 大图加载完毕后执行截图
    imageLoaded(e) {
      // 排除重复执行的问题，图片加载完毕如果当前图片的-show=false那么就不要执行创建
      if (!e.target.dataset.show) {
        return;
      }
      setTimeout(() => {
        this.createPlaybillImg();
      }, 20);
    },
    // 渲染图片
    createPlaybillImg() {
      console.log('creating img!');
      let card = this.$refs.playbillCard;
      // 获取海报DOM的宽高
      let cardWidth = card.offsetWidth;
      let cardHeight = card.offsetHeight;

      html2canvas(card, {
        // 解决图片跨域的配置，这里还需要后台的配合！后台不配合仅这里配置是不够的
        useCORS: true,
        // 指定截图的宽高
        width: cardWidth,
        height: cardHeight,
        // 重点！当页面出现滚动条时，会出现截图空白，即截图有偏移！！所以需要加上以下4句
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        x: 0,
        y: window.pageYOffset,
        // 可解决图片不透明问题以及有白边
        backgroundColor: null,
      }).then((canvas) => {
        // 给截图生成的canvas添加id
        canvas.setAttribute('id','thecanvas');
        // document.body.appendChild(canvas);
        var context = canvas.getContext('2d');
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        // image/jpeg的时候第二个参数可以选择图片的质量 默认0.92 取值0-1
        // 这里第二个参数是1那么生成的图片会很大
        let data = canvas.toDataURL("image/jpeg");

        // 生成图片后，向外部发送事件
        this.isCreating = false;
        // 携带参数图片的base64以及正在生成改为false
        this.$emit('created', data, this.isCreating);
      });
    },
    getPlaybillInfo() {... // 从body上获取数据},
    // 异步获取图片
    getBase64Img() {
      // 如果没有图(billImg='')那么就不请求 
      if (!this.billImg) {
        this.noBillImg();
        return;
      }
      // 这里需要单独引用方法，发送图片链接返回base64编码
      getBase64(this.billImg).then((res) => {
        if (res.error === ERR_OK) {
          if (!res.data) {
            this.noBillImg();
            return;
          }
          this.billImgBase64(res.data);
        }
      }).catch(() => {
        // 分享图获取失败 抛出error
        this.$emit('error');
        window.alert('分享图获取失败，请稍后重试');
      })
    },
    // 根据组件名 给数据绑定返回的base64数据，让页面中显示图片
    billImgBase64(base64) {
      switch (this.billComponent) {
        case 'index':
          this.billImgIndex = base64;
          break;
        case 'detail':
          this.billImgDetail = base64;
          break;
      }
    },
    // 如果没有图片那么根据情况选择显示不同的图片赋予base64作为主图
    noBillImg() {
      switch (this.billComponent) {
        case 'index':
          this.billImgIndex = require('../playbill/no-img-index.jpg');
          break;
        case 'detail':
          this.billImgDetail = require('../playbill/no-news-image@2x.jpg');
          break;
      }
    },
    // 实例化二维码的类，指定宽高
    // 最终结果会: <span class="qrbox"><canvas display=none></canvas> <img src=".."></span>
    createQrCode() {
      this.qrcode = new QRCode(this.$refs.qrbox, {
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    // 当组件切换时候，需要销毁之前的数据,让data中绑定数据为空
    resetData() {
      this.showCard = false;
      this.billTitle = '';...
    },
    // 关闭时候销毁二维码，否则会重复生成
    clearQrCode() {
      // 清除代码（不生效）
      this.qrcode.clear(); 
      // 这个才生效！！
      this.$refs.qrbox.innerHTML = '';
    },
    // 外部方法，销毁海报
    destoryCard() {
      this.clearQrCode();
      this.resetData();
    }
  }
}

4、重点样式

.playbill-card-x {
    overflow: hidden;
    position: fixed;
    // 不能是Bottom 否则截图会是黑屏
    top: 0;
    left: 0;
     // opacity=0是可以截图的，避免手机上拉到顶部露出底下的海报！
    opacity: 0;
    // 经过测试，z-index=-1时候 依然可以截图 但是不可以隐藏
    z-index: -1;
  }

划重点！

当不是同域下的图片，会有跨域问题无法截图！

解决跨域图片问题最最直接的方法是将图片转为base64，这里提供一个php脚本

<?php
header("Access-Control-Allow-Origin: *");
header("content:application/json;chartset=uft-8");
/**
 * 将传入图片地址转化为base64
 */
class ImgToBase64 
{
    public $url;
    public $base64;

    function __construct($url)
    {
        $this->url = $url;

        $this->checkUrl() && $this->tobase64();
        
    }

    private function checkUrl()
    {
        $pattern = '/http[s]?:\/\/[\w.-\/]+\.(jpg|png|gif)/i';
        preg_match($pattern, $this->url, $match);
        if (!isset($match[0])) {
            $this->showError();
            return false;
        }
        $this->url = $match[0];
        return true;
    }

    private function tobase64()
    {
         $imageInfo = @getimagesize($this->url);
         if (!$imageInfo) {
             $this->showError();
             return;
         }
         $base64 = base64_encode(file_get_contents($this->url));
         // 在每个字符后分割一次字符串
         $base64 = chunk_split($base64);
         $blob = 'data:' . $imageInfo['mime'] . ';base64,';
         $this->base64 = $blob . $base64;
    }

    private function showError()
    {
        $this->base64 = false;
    }

    public function getBase64()
    {
        return $this->base64;
    }

}

// $img = 'http://statics.qdxin.cn/uploadfile/2020/1212/20201212100223404.jpg';

$img_url = isset($_GET['url']) ? $_GET['url'] : false;
$res = array(
    'error' => 1,
    'data' => false
);
if ($img_url) {
    $base64 = new ImgToBase64($img_url);
    $img_base64 = $base64->getBase64();
    (boolean)$img_base64 && $res = array(
        'error' => 0,
        'data' => $img_base64
    );
}
$json = json_encode($res);
exit($json);
?>

请求这个地址，如http://m.qdxin.cn/appc/getbase64.php?url=http://wb/imgs/cover.jpg 获取base64，然后插入到img中。

另附vue中使用axios发送请求

import axios from "axios";
const api = debug  ? `http://localhost/getxinpage/getbase64.php?url=`;
export default function (target) {
  let url = api + target;
  return axios.get(url).then((res) => {
    return Promise.resolve(res.data);
  }).catch((err) => {
    return Promise.reject(err);
  })
}
import getBase64 from "api/getBase64"; // 组件中使用

qrcodejs2的使用

npm i qrcodejs2 // 安装
this.qrcode = new QRCode(存放二维码的DOM元素, {
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});
this.qrcode.makeCode('要生成二维码的链接');

html2canvas

1、如果截图中有图片，一定要在图片加载完后再开始截图！

<img @load="loaded">
loaded() {...}

2、当屏幕有滚动条的时候，会截图是空白！这时候必须将要截图的DOM设置样式fixed!且top=left=0!(bottom会导致黑屏!)，并且截图的时候不可以隐藏，但是可以设置z-index=-1和opacity:0（简单来说就是截图的DOM必须撑开高度！且要在屏幕中！）

.playbill-card-x {
    overflow: hidden;
    position: fixed;
    // 不能是Bottom 否则截图会是黑屏
    top: 0;
    left: 0;
    // 避免手机顶部下拉露出海报，可以设透明度
    opacity: 0;
    // 经过测试，档z-index=-1时候 依然可以截图 但是不可以隐藏
    z-index: -1;
  }

3、不要使用vw、vh这样的单位，截图也会失败！最好是固定宽高！老老实实使用PX！

4、截图有不支持的CSS属性，比如白色->透明的渐变，最好用图片替代！虚线的样式border:dashed不支持，截图后会变成实线。且不支持box-showd、object-fit、writing-mode，以及::before/after伪类等。具体支持的与不支持的样式参见：html2canvas支持与不支持的样式

5、图片模糊以及背景图片不显示：使用img标签进行替代！

生成的海报中有渐变（白色->透明）原先使用样式书写白色->透明渐变发现截图透明的地方变黑了，后来改为使用图片:

.article-x : after{
  content: "";
  // 或者 content: url(alpha@2x.png);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: url(alpha@2x.png) ...
}

生成的海报在IPX上不显示白色蒙层！！但是在安卓以及IP8上可以显示！

所以这里最终改为使用img标签（注意所有的蒙层都要使用IMG标签！）

<article class="article-x">
     <h3>...</h3>
     <!--  白色-透明渐变原先写在样式背景中，iosX上无效，使用img才有效 content:url(..也无效)   -->
     <!-- data => detailWhite：require(...)  -->
     <img :src="detailWhite" class="bot-white-alpha">
</article>
.article-x {
   position: relative;
   .bot-white-alpha{
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
    }
}

6、图片不显示问题是因为有图片跨域了！请使用上面的php将图片转base64或者在后台配置了允许跨域访问后，添加两个配置项，允许跨域进行访问：

header("Access-Control-Allow-Origin: *"); //php
new html2canvas(document.getElementById('qianduanwz'), {
  allowTaint: true,
  useCORS: true 
}).then(canvas => {
   // ……
});

7、截图是空白的问题

截图空白是因为有滚动条！除了要执行3.3-2中的样式外，还要如下设置：

npm install html2canvas --save
 
import html2canvas from "html2canvas";
 
let myBox = this.$refs.saveBox;
  html2canvas(myBox, {
    useCORS: true,
    // 截图区域的宽 可以用DOM宽高替换，具体详见：（二）处
    width: window.screen.availWidth, 
    // 截图区域的高
    height: window.screen.availHeight,
    // 以下4项必须设置
    windowWidth: document.body.scrollWidth,
    windowHeight: document.body.scrollHeight,
    x:0,
    y:window.pageYOffset
  }).then(function(canvas) {
    // 默认0.92设置1后生成的图片会很大
    let data = canvas.toDataURL("image/jpeg", 1);
    console.log(data)
});

8、不要使用伪类

不要使用像:before和:after这样的伪类，html2canvas是无法正确渲染的，像ipx机型会直接忽略掉伪类元素，如果需要 请使用元素代替。

（篮框部分为3.3-5的示例）

如红框处原先使用:before和:after制作，但是在ipx上无法显示，后改为使用div元素绘制虚线上的圆

<div class="news-info">
    <!--  用伪类做的圆（盖在虚线上）也不能正常显示改为元素替代  -->
    <!--  通过样式控制只有在详情页生成的时候显示   -->
    <div class="detail-circle">
      <span class="left"></span>
      <span class="right"></span>
    </div>
    <div class="info-x">...</div>
    <span class="qrbox" ref="qrbox"></span>
    <span class="clear"></span>
  </div>
</div>

.playbill-card.isDetail {
  .news-info {
      position: relative;
      .detail-circle{
        display: block;
        position: absolute;
        width: 100%;
        height: 16px;
        left: 0;
        top: -10px;

        span{
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #f4f4f4;
        }
        .left{
          left: -10px;
        }
        .right{
          right: -10px;
        }
      }
  }
}

附件下载

相关资料