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

Myth丶恋晨 2022-12-26 13:29 345阅读 0赞

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>