Vue realizes the screenshot of mobile H5 page [html2canvas, domtoimage]

Recently, the development of Vue project needs screenshots to realize page sharing. At the beginning, there is no clue. How to realize screenshots on H5 page? Check some materials and recommend two components, html2canvas and domtoimage. Next, I will demonstrate the use of these two components.

1.html2canvas

1) Html2canvas can directly screen the whole or part of the page in the user browser. This html2canvas script will be implemented by reading Dom and applying different styles to these elements when the page is rendered into a canvas image. It does not need any rendering from the server, and the entire picture is created in the client browser. To learn more, read the official HTML 2canvas documentation
2) Install reference html2canvas

npm install html2canvas

import html2canvas from 'html2canvas';

3) Implementation screenshot

<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" > 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>

Different configuration options available for html2canvas http://html2canvas.hertzen.co

2.domtoimage

DOM to image is a library that can convert any DOM node into vector (SVG) or raster (PNG or JPEG) images written in JavaScript. It is based on Paul bakaus’s domvas and has been completely rewritten, fixing some errors and adding some new features (such as web font and image support). To learn more, read the GIT address of domtoimage

1) NPM installation and reference

npm install dom-to-image

import domtoimage from 'dom-to-image';

2) Domtoimage methods and properties
The main methods of domtoimage are:
Domtoimage. Topng (…); convert nodes to PNG format pictures
Domtoimage. Tojpeg (…); convert the node to a picture in JPG format
Domtoimage. Tosvg (…); convert the node to SVG format pictures, and the format of the generated pictures is Base64 format
Domtoimage. Toblob (…); convert the node to binary format, which can directly download the picture
Domtoimage. Topixeldata (…); get the original pixel value and return it in the form of uint8array array. Each 4 array elements represents a pixel point, that is, RGBA value. This method is also very practical and can be used to write shader colors in webgl.

The main properties of domtoimage are:
Filter: write unnecessary nodes in the filter node;
Bgcolor: picture background color;
Height, width: width and height of the picture;
Style: the style of the incoming node, which can be any valid style;
Quality: the quality of the picture, that is, the clarity;
Cacheboost: adding a timestamp to the URL of a picture is equivalent to adding a new picture;
Imageplaceholder: when the image generation fails, the prompt on the image is equivalent to the ALT of the IMG tag;

3) Implementation screenshot

<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" > screenshot < / 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>

3. Problems encountered

When the mobile html2canvas implements the screenshot, the screenshot of iPhone 6sp fails, and there is a blank situation. Up to now, the reason has not been found (known partners can tell). The solution is to use domtoimage for the screenshot of iPhone 6sp.

Reference article: http://www.voidcn.com/article