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

时间:2022-03-30 18:13:26

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>

 效果预览

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