Vue+html2canvas截图空白的问题

推荐 28147次阅读 2213人点赞 作者: WuBin 发布时间: 2021-03-02 09:04:51
扫码到手机查看

在使用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;
        }
      }
  }
}

附件下载

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:html2canvas,vue,painter
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8686次阅读 558人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3624次阅读 271人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13644次阅读 881人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12457次阅读 411人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10879次阅读 873人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14963次阅读 1192人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14516次阅读 1182人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    28147次阅读 2213人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    24329次阅读 1871人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录