html2canvas 生成图片 以及出现白边问题解决办法 生成海报

html2canvas 生成图片 以及出现白边问题解决办法：
我在写demo的时候，pc端调试正常，但是到了移动端图片底部就会出现 一条白边，我的解决办法就是：backgroundColor: “#ff2e46”, 设置背景色就行了。

---

整体代码实现思路：

加载的时候判断是pc还是移动端：pc端展示保存按钮，移动端隐藏保存按钮。
然后把要变成图片的页面的id (box)传到 html2canvas 里面，html2canvas会把box的页面转化为base64地址，重新赋值img，与此同时要把我们自己设置的二维码要隐藏起来，因为二维码已经融入到 base64里面去了。如果移动端长按图片会自动保存的，如果是pc端就要显示保存按钮，点击保存图片按钮的时候 创建一个a标签 把base64图片地址复制给a标签的href 并设置名称，触发a标签的click事件，图片就可以下载下来。

<template>
  <div class="body" id="box">
    <img :src="urls" class="bgcImg" />
    <div class="qrcode">
      <!-- 二维码图片路径 -->
      <img
        src="https://tse4-mm.cn.bing.net/th/id/OIP.UkbrVhUuW-DIFPwMDLHHQgHaHa?w=178&h=180&c=7&o=5&pid=1.7"
      />
    </div>
    <div class="longbtns" @click="saveImg">保存图片</div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      urls: require("@/assets/img/addFriends.png"),// 一定要有默认的 背景图
      isMobiles: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.isMobile();
      this.init();
    });
  },
  methods: {
    // 判断浏览器函数
    isMobile() {
      if (
        window.navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        this.isMobiles = false; // 移动端
      } else {
        this.isMobiles = true; // PC端
      }
    },

    // 点击保存图片
    saveImg() {
      let a = document.createElement("a");// 创建图片
      a.href = this.urls;
      a.download = "imgName"; // 下载的图片名字
      a.click();
    },

    init() {
      let that = this;
      let longbtn = document.querySelector(".longbtns"); // 保存按钮
      let qr = document.querySelector(".qrcode");

      longbtn.style.display = "none"; //先 把按钮隐藏起来

      html2canvas(document.getElementById("box"), {
        useCORS: true,
        dpi: window.devicePixelRatio * 2,
        backgroundColor: "#ff2e46", // 背景颜色
      }).then(function (canvas) {
        let url = canvas.toDataURL();
        that.urls = url; //  获取base64地址
        qr.style.display = "none"; // 因为二维码已经融入了base64里，这个时候要展示整张图片，所有要把二维码隐藏起来
        that.isMobiles && (longbtn.style.display = "block"); // pc端 保存按钮才显示

      });
    },
  },
};
</script>

<style lang="less" scoped>
@width322: 322px;
@width458: 458px;

// 居中定位
.positionCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.body {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #ff2e46;
  // overflow: hidden;
  margin: 0;
  padding: 0;
  .bgcImg {
    width: 100vw;
    height: 100vh;
  }
  .qrcode {
    width: @width458;
    height: @width458;
    background: #ffffff;
    box-shadow: 0px 3px 13px 0px rgba(221, 0, 24, 0.36);
    border-radius: 30px;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%);
    img {
      width: @width322;
      height: @width322;
      .positionCenter;
    }
  }
  .longbtns {
    position: absolute;
    color: #fff;
    bottom: 50px;
    right: 50px;
  }
}
</style>