vue使用domtoimage實現移動端H5頁面截圖

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>

 效果預覽