vue实现移动端H5页面截图html2canvasdomtoimage

jiezi

5 年前

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

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…

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）实现截图

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

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

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

vue实现移动端H5页面截图html2canvasdomtoimage

1.html2canvas

2.domtoimage

3. 遇到的问题