一、场景和需求

最近在做的项目有这样一个需求：APP的打卡分享到微信好友和微信朋友圈的功能。实质就是将网页内容生成一张图片给分享出去(不是抛出一个网页链接啥的)，那么问题来了，如何将网页上的某一块内容转换为图片呢？

二、解决方案

使用html2canvas插件来实现。html2canvas是一款利用javascript进行屏幕截图的插件，它能够实现在用户浏览器端直接对整个或部分页面进行截屏。

三、前期准备

1.安装 html2canvas

npm install html2canvas --save  或 yarn add html2canvas

2.引入 html2canvas

import html2canvas from "html2canvas";

四、具体实现小demo

<template>
  <div id="page">
    <!-- 截图区域 -->
    <div class="content" ref="content">这里是丰富的网页内容...</div>
    <!-- 点击调用方法获取截图 -->
    <button class="btn" @click="getPrintScreen">获取截图</button>
    <div class="img-box">
      <h2>截图结果:</h2>
      <!-- 通过img标签把获取到的截图呈现出来 -->
      <img :src="imgUrl" alt="" />
    </div>
  </div>
</template>

<script>
// 引入 html2canvas
import html2canvas from "html2canvas";
export default {
  name: "Screenshot",
  data() {
    return {
      imgUrl: null, //截图地址
    };
  },
  methods: {
    //获取截图方法
    getPrintScreen() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.content, {
        // width: 30, //截图宽度
        // height: 50, //截图高度
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
        this.imgUrl = url;
      });
    },
  },
};
</script>


<!-- 本demo样式代码（不重要） -->
<style lang="less">
#page {
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .content {
    height: 30%;
    font-size: 26px;
    font-family: Source Han Sans CN;
    color: rgb(245, 245, 245);
    text-align: center;
    line-height: 200px;
    background-color: rgb(243, 161, 152);
  }
  .btn {
    display: block;
    width: 80vw;
    height: 11.733vw;
    background: #79c76f;
    border-radius: 2vw;
    border: none;
    font-size: 4.8vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 11.733vw;
    letter-spacing: 4px;
    text-align: center;
    margin: 30px 0 20px 40px;
  }
}
</style>

欢迎大家一起交流讨论!