vue实现移动端H5页面截图【html2canvas、domtoimage】

开发vue项目最近遇到需要截图实现页面分享,刚开始毫无头绪,H5页面如何实现截图,查阅一些资料,推荐html2canvas、domtoimage这两款组件,接下来演示一下这两款组件的使用。

1.html2canvas

1)html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。想要了解更多,阅读html2canvas官方文档
2)安装引用html2canvas

npm install html2canvas

import html2canvas from 'html2canvas';

图片描述

3)实现截图

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

2.domtoimage

dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。想要了解更多,可以阅读domtoimage的git地址

1)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中编写着色器颜色。

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>

图片描述

3.遇到的问题

移动端html2canvas实现截图时,iphone6sp截图失败,出现空白情况,到现在还没找到原因(知道的小伙伴可告知),解决思路是针对iphone6sp机型使用domtoimage进行截图。

参考文章:http://www.voidcn.com/article...

阅读 8.5k

推荐阅读