vue實現移動端H5頁面截圖【html2canvas、domtoimage】

時間 2019-11-07

標籤 vue 實現移動 h5 頁面截圖 html2canvas html canvas domtoimage 欄目無線简体版

原文原文鏈接

開發vue項目最近遇到須要截圖實現頁面分享，剛開始毫無頭緒，H5頁面如何實現截圖，查閱一些資料，推薦html2canvas、domtoimage這兩款組件，接下來演示一下這兩款組件的使用。html

1.html2canvas

1）html2canvas可以實如今用戶瀏覽器端直接對整個或部分頁面進行截屏。這個html2canvas腳本將當頁面渲染成一個Canvas圖片，經過讀取DOM並將不一樣的樣式應用到這些元素上實現。它不須要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器建立。想要了解更多，閱讀html2canvas官方文檔
2）安裝引用html2canvasvue

npm install html2canvas

import html2canvas from 'html2canvas';

3）實現截圖node

<template>
  <div class="qr-code-box" ref="imageToFile">
    <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="screenShot">截圖</button>

    <img :src="img" v-if="img"/>
  </div>
</template>

<script>
  import VueQr from 'vue-qr';
  import html2canvas from 'html2canvas'

  export default {
    data() {
      return {
        config: {
          value: '',
          logo: require('./r-VY-hpinrya9109218.jpg')
        },
        img: ""
      }
    },
    mounted() {
      this.config.value = "https://www.baidu.com/";
    },
    methods: {
      screenShot() {
        html2canvas(this.$refs.imageToFile, {
          width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
          height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        }).then((canvas) => {// 第一個參數是須要生成截圖的元素,第二個是本身須要配置的參數,寬高等
          this.img = canvas.toDataURL('image/png');
        })
      },
    },
    components: {
      VueQr,
      html2canvas
    }
  }
</script>

html2canvas可用的不一樣配置選項 http://html2canvas.hertzen.co...git

2.domtoimage

dom-to-image是一個能夠將任意DOM節點轉換爲用JavaScript編寫的矢量（SVG）或光柵（PNG或JPEG）圖像的庫。它基於Paul Bakaus的domvas而且已被徹底重寫，修復了一些錯誤並添加了一些新功能（如Web字體和圖像支持）。想要了解更多，能夠閱讀domtoimage的git地址github

1）npm安裝和引用npm

npm install dom-to-image

import domtoimage from 'dom-to-image';

2）domtoimage方法和屬性
domtoimage主要的方法有：
domtoimage.toPng(...);將節點轉化爲png格式的圖片
domtoimage.toJpeg(...);將節點轉化爲jpg格式的圖片
domtoimage.toSvg(...);將節點轉化爲svg格式的圖片，生成的圖片的格式都是base64格式
domtoimage.toBlob(...);將節點轉化爲二進制格式，這個能夠直接將圖片下載
domtoimage.toPixelData(...);獲取原始像素值，以Uint8Array 數組的形式返回，每4個數組元素表示一個像素點，即rgba值。這個方法也是挺實用的，能夠用於WebGL中編寫着色器顏色。canvas

domtoimage主要的屬性有：
filter ：過濾器節點中默寫不須要的節點；
bgcolor ：圖片背景顏色；
height, width ：圖片寬高；
style ：傳入節點的樣式，能夠是任何有效的樣式；
quality ：圖片的質量，也就是清晰度；
cacheBust ：將時間戳加入到圖片的url中，至關於添加新的圖片；
imagePlaceholder ：圖片生成失敗時，在圖片上面的提示，至關於img標籤的alt；數組

3）實現截圖瀏覽器

<template>
  <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>
</template>

<script>
  import VueQr from 'vue-qr';
  import domtoimage from 'dom-to-image'

  export default {
    data() {
      return {
        config: {
          value: '',
          logo: require('./r-VY-hpinrya9109218.jpg')
        },
        img: ""
      }
    },
    mounted() {
      this.config.value = "https://www.baidu.com/";
    },
    methods: {
      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);
          });
      }
    },
    components: {
      VueQr,
      domtoimage
    }
  }
</script>