开始
npm install vue-qr --save // 安装依赖//使用// 1. 页面引入组件import vueQr from "vue-qr";components: {vueQr,},// 2. 使用组件// :logoSrc 二维码中间logo图标// :text二维码内容 如：?data:sss// :size生成的二维码大小，我这里没用到 可以直接用css修改样式<vue-qrclass="create-qr":logoSrc="logo":text="item.qrcodeRequestUrl":style="{height:item.qrcodeY+'px',width:item.qrcodeX+'px',left:item.bannelQrcodeX+'px',top:item.bannelQrcodeY+'px'}"></vue-qr>
需求：后端返回数据（海报底图，二维码内容）
首先需要先渲染出底图以及生产二维码，将二维码放入指定位置，最后再将dom转为图片，方便用户保存出图片配置项： 海报底图，二维码内容（item.qrcodeRequestUrl），二维码大小（长、宽） （qrcodeY，qrcodeX），二维码X,Y轴偏移距离（就是我们用定位二维码时，top跟left的值） （bannelQrcodeX，bannelQrcodeY）
//因为 html2canvas 是将dom转成图片的 所以咱们需要先展示一下 等生成好图片后再v-if隐藏掉<div v-if="!isOK"><divstyle='position: relative;'class="create-box":ref="`imageDom${index}`":id="`imageDom${index}`"v-for="(item, index) in bannerImg":key="index"><img :src="item.bannerImageUrl" /><vue-qrclass="create-qr":logoSrc="logo":text="item.qrcodeRequestUrl":style="{height:item.qrcodeY+'px',width:item.qrcodeX+'px',left:item.bannelQrcodeX+'px',top:item.bannelQrcodeY+'px'}"></vue-qr></div></div>
// 后端返回数据会有多张，注意v-for的时候 dom 的ref不能写死（id），因为咱们用html2canavas获取dom的时候才不会有问题
// 图片不需要写啥样式 自动他撑开就行，给v-for的盒子加上定位，子绝父相，再给二维码定位住,
就是为了把码放进那个白框里
created() {//接口获取数据getQrCode(this.$route.query.index == "1" ? "0" : "").then((res) => {this.bannerImg = res.data.data;//务必！务必！！务必！！！务必！！！！务必！！！！！ //这块要写在created()里边this.$nextTick(() => {setTimeout(() => {this.bannerImg.forEach((item, index) => {this.saveImg("imageDom" + index, index);});}, 1000);setTimeout(() => {this.isOK=true //因为咱们转成海报后就直接展示海报了 那这块就不需要在现实了this.loading = false; //关闭loading ，给个加载感觉更牛逼嘿嘿}, 1000);});});},methods:{saveImg(val, index) {console.log(val);window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;// 先获取你要转换为img的dom节点var node = document.getElementById(val); //传入的id名称// console.log("node", node);console.log(node);var width = node.offsetWidth; //dom宽var height = node.offsetHeight; //dom高var scale = 1; //放大倍数 这个相当于清晰度 调大一点更清晰一点html2canvas(node, {width: width,heigth: height,backgroundColor: "null", //背景颜色 为null是透明dpi: window.devicePixelRatio * 0.5, //按屏幕像素比增加像素scale: scale,X: 0,Y: 0,scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多scrollY: 0,allowTaint: false,useCORS: true, //是否使用CORS从服务器加载图像 !!!allowTaint: true, //是否允许跨域图像污染画布 !!!}).then((canvas) => {let url = canvas.toDataURL("image/png");this.$set(this.bannerImg[index], "base", url);});},}
