vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报

开始

npm install vue-qr --save   // 安装依赖//使用// 1. 页面引入组件import vueQr from "vue-qr";components: {vueQr,},// 2. 使用组件// :logoSrc  二维码中间logo图标// :text     二维码内容 如：https://www.baidu.com?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);});},
}

vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报相关推荐

vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
前端批量生成二维码并打包下载
前端批量生成二维码并打包下载项目中遇到一个紧急需求在没有后端配合的情况下,前端独自实现生成二维码并打包下载生成二维码:下载 qrcodejs2 批量打包下载:下载 JSZip 和 FileSave ...
springboot+hutool批量生成二维码压缩导出
文章目录 1.引入依赖 2.测试编码 3.批量生成 4.解析excel 5.批量图片压缩 6.上传excel直接将输出流转成压缩包 1.引入依赖 <de ...
TXT文件批量生成二维码
大多数人在制作标签时,数据库文件都选择Excel文件,其实TXT文件在作为数据库时,也是可以制作各种可变数据标签的,比如批量生成二维码,条形码等.下面我们就使用TXT文件作为数据库批量生成二维码. 打 ...
读取excel批量生成二维码
昨天工作需要,让生成二维码,让用草料生成,就需要一个个的复制粘贴,有点麻烦.关键是量特别大,如果传统的复制粘贴要很长时间才可以. 后来想到用程序生成.于是百度了一下生成二维码的方法,别说还很简单,把代 ...
速码工具箱，Excel批量生成二维码，瞬间搞定！
之前写过一篇文章,<批量生成二维码>,当时介绍了VBA中两种生成二维码的方式,一种需要引用QRmaker控件,一种是纯代码生成的方式.但是这两种方式都有一个最大的bug--不支持64位. ...
如何从Excel表格导入数据批量生成二维码
目前二维码应用渐趋广泛,二维码具有储存量大.保密性高.追踪性高.抗损性强.备援性大.成本便宜等特性,这些特性特别适用于表单.安全保密.追踪.证照.存货盘点.资料备援等方面.那么我们怎么用条码打印软件从 ...

vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报

开始

需求：后端返回数据（海报底图，二维码内容）

vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报相关推荐

最新文章

热门文章