博客

使用html2canvas将两张图片合成一张,并下载海报（效果图）

1、安装 html2标题canvas

html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

1. es6 模块化引入方式，项目中使用

  npm install --save html2canvas

2. js直引方式

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

2、使用

// 基础语法：
html2canvas(element, options);

 <div>
    <div class="all-tool">
      <div style="width:250px;height:400px;" class="course-container" id="myImage">
        <div class="course">
          <img style="width:250px;height:400px;" :src="coverImg" />
        </div>
        <div style="bottom:66px;left:50px;margin-left:50px" class="code">
          <img style="width:100px;height:100px;" :src="qrCode" />
        </div>
      </div>
    </div>
    <div class="btn-all" type="button">
      <el-button size="mini" type="primary" @click="saveImage">下载海报</el-button>
    </div>
    <a id="link"></a>
  <div>
<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      qrCode:"",
      coverImg:""
    };
  },
  methods: {
    saveImage() {
      html2canvas(document.querySelector("#myImage")).then((canvas) => {
        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var link = document.getElementById("link");
        link.setAttribute("download", "海报.png");
        link.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.all-tool {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  background: #fff;
  box-sizing: border-box;
  .course-container {
    height: 400px;
    width: 300px;
    position: relative;
  }
  .course {
    z-index: 1;
    position: absolute;
  }

  .code {
    z-index: 2;
    position: absolute;
  }
}
.btn-all {
  text-align: center;
  margin: 30px auto 0;
}
</style>