vue使用domtoimage实现移动端H5页面截图

Posted 2021-03-18 linfblog

dom-to-image是一个可以将任意DOM节点转换为用javascript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库。 它基于Paul Bakaus的domvas并且已被完全重写，修复了一些错误并添加了一些新功能（如Web字体和图像支持）。

github：点击查看

线上demo：点击查看

npm安装和引用

npm install dom-to-image
 
import domtoimage from ‘dom-to-image‘;

domtoimage方法和属性
domtoimage主要的方法有：
domtoimage.toPng(...);将节点转化为png格式的图片
domtoimage.toJpeg(...);将节点转化为jpg格式的图片
domtoimage.toSvg(...);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toBlob(...);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.toPixelData(...);获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。

domtoimage主要的属性有：
filter ： 过滤器节点中默写不需要的节点；
bgcolor ： 图片背景颜色；
height, width ： 图片宽高；
style ：传入节点的样式，可以是任何有效的样式；
quality ： 图片的质量，也就是清晰度；
cacheBust ： 将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt；

实现代码

<template>
  <div id="pageDiv" :style="{‘padding-top‘:isWeiXin || isApps?‘0‘:‘3rem‘}">
    <!-- 页面头部-->
    <header-com :poptitle="‘domtoimage截图‘" :type="‘doc_title‘" v-if="!isWeiXin && !isApps"></header-com>
    <!-- 页面的主要内容 -->
    <section class="content">
      <div class="qr-code-box" id="my-node">
        <vue-qr
          :logoSrc="config.logo"
          :text="config.value"
          class="qr-code-pic"
          :correctLevel="3"
          :margin="0"
          :dotScale="0.5"
        ></vue-qr>
 
        <button type="button" class="shot-btn" @click="shotPic">截图</button>
 
        <img :src="img" v-if="img" />
      </div>
    </section>
  </div>
</template>
<script>
import HeaderCom from "@/components/header"; //页面头部
import { changeUrl } from "@/utils/changeUrl";
import VueQr from ‘vue-qr‘; //二维码插件
import domtoimage from ‘dom-to-image‘
export default {
  data() {
    return {
      isWeiXin: TS_WEB.isWeiXin,
      isApps: TS_WEB.isApp,
      config: {
        value: "",
        logo: require("@/statics/images/system/sjbj.jpg")
      },
      img: ""
    };
  },
  components: {
    HeaderCom,
    VueQr,
    domtoimage
  },
  methods: {
    changeUrl,
    shotPic() {
      let node = document.getElementById(‘my-node‘);
      domtoimage.toPng(node)
        .then((dataUrl) => {
          this.img = dataUrl;
        })
        .catch(function (error) {
          console.error(‘oops, something went wrong!‘, error);
        });
    }
  },
  mounted() {
    this.config.value = "https://www.baidu.com/";
  },
  created() {
    document.title = "domtoimage截图";
  }
};
</script>
 
<style lang="less" scoped>
// 盒子模型
#pageDiv {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  .content {
    height: 100%;
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
    .qr-code-box {
      width: 100%;
      height: 100%;
      #new_img {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>

 效果预览