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"><!-- 二维码图片路径 --><imgsrc="https://tse4-mm./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>
