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

Time:2019-12-22

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';

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

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>

Vue realizes the screenshot of mobile H5 page [html2canvas, domtoimage]
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>

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

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

Recommended Today

Redis design and implementation 4: Dictionary Dict

In redis, the dictionary is the infrastructure. Redis database data, expiration time and hash type all take the dictionary as the underlying structure. Structure of dictionary Hashtable The implementation code of hash table is as follows:dict.h/dictht The dictionary of redis is implemented in the form of hash table. typedef struct dictht { //Hash table array, […]