使用html2canvas生成海报并解决生成模糊以及iphone7生成不了的问题以及不支持object-fit:cover问题

1、安装插件

npm install html2canvas --save

2、在使用的页面进行引入

import html2canvas from "html2canvas";

3、把需要生成的内容放在一个父盒子中

<template>
  <div class="index-content">
    <div v-show="!isShow">
      <div class="cavans-poster" ref="imagesPoster">
        <img src="../../static/images/haibao.jpg" class="poster-img" />
        <div class="name">test</div>
      </div>
      <canvas class="canvas" ref="canvas" :width="canvasW" :height="canvasH"></canvas>
      <div class="btn" @click="drawImg">生成海报</div>
    </div>
    <div v-show="isShow" class="poster-content">
      <img :src="imgUrl" class="poster" />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  name: "index",
  data() {
    return {
      canvasW: 750,
      canvasH: 1624,
      imgUrl: "",
      isShow: false
    };
  },
  methods: {
    drawImg() {
      html2canvas(this.$refs.imagesPoster, {
        backgroundColor: null
      }).then(canvas => {
        this.isShow = true;
        let imgUrl = canvas.toDataURL("image/png");
        this.imgUrl = imgUrl;
      });
    }
  }
};
</script>

<style scoped lang="less">
.index-content {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  .cavans-poster {
    width: 37.5rem;
    height: 81.2rem;
    position: relative;
    .poster-img {
      width: 37.5rem;
      height: 81.2rem;
      position: absolute;
      top: 0;
      left: 0;
    }
    .name {
      position: absolute;
      top: 20.3rem;
      left: 8.5rem;
      font-size: 2rem;
    }
  }
  .canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
  }
  .btn {
    width: 6rem;
    height: 3rem;
    position: fixed;
    bottom: 3rem;
    right: 2rem;
    background: #1989fa;
    line-height: 3rem;
    border-radius: 3rem;
    text-align: center;
    color: #fff;
  }
  .poster-content {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .poster {
    width: 37.5rem;
    height: 81.2rem;
  }
}
</style>

生成后部分手机会出现模糊的情况，这是由于不用的手机的像素比都不一样，像素比也就是手机的物理像素和css像素比，有一些手机的像素比是2有一些是3还有是1的，那么保证不模糊可以使用像素比进行放大倍数，这个时候可以设置像素比例，像素比例= 手机像素/css像素，如下

 if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
   return 1;

然后在html2canvas的设置中设置scale为这个像素比

注意！！！！！

这个插件有苹果机机的兼容性问题，在iphone7 iphonex都生成不了的时候，请看看html2canvas的版本，只有1.0.0-rc.4这个版本是可行的，如果你指定下载这个版本在package.json中看到是^1.0.0-rc.4，则不一定就是1.0.0-rc.4版本，它是指1.0.0-rc.4以上的版本，把^去掉再install就可以了

还有一个我问题就是html2canvas不支持css中object-fit:cover属性问题

接下来就是要改插件了，html2canvas用的是上面说的1.0.0-rc.4这个版本，找到目录下的node_modules/_html2canvas@1.0.0-rc.4@html2canvas/dist/html2canvas.js

打开文件夹找到大约6217行代码处，CanvasRenderer.prototype.renderReplacedElement方法，按照以下方法进行修改

原来的

改成以下

 CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
            // 上面注释的原来的代码，下面是我们自己修改后的
            // Start Custom Code
            if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
              var box = contentBox(container);
              var path = calculatePaddingBoxPath(curves);

              this.path(path);
              this.ctx.save();
              this.ctx.clip();

              let newWidth;
              let newHeight;
              let newX = box.left;
              let newY = box.top;

              if(container.intrinsicWidth / box.width < container.intrinsicHeight / box.height) {
                newWidth = box.width;
                newHeight = container.intrinsicHeight * (box.width / container.intrinsicWidth);
                newY = box.top + (box.height - newHeight) / 2;
              } else {
                newWidth = container.intrinsicWidth * (box.height / container.intrinsicHeight);
                newHeight = box.height;
                newX = box.left + (box.width - newWidth) / 2;
              }

              this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, newX, newY, newWidth, newHeight);
              this.ctx.restore();
            }
            // End Custom Code
        };

直接复制进去即可