干货 |
您所在的位置:网站首页 › 商品展示源码怎么弄出来 › 干货 |
前端、后端都可以生成二维码,轮子很多,今天分别来分享一下前后端如何使用轮子生成二维码的方法。 后端:选择一款合适的二维码生成库,如zxing、qrcode等,并在后端代码中引入该库。编写代码,根据业务需求生成相应的二维码图像,并将其输出为二进制流。 前端:使用HTML5提供的canvas元素,创建一个画布,并在画布上绘制出后端输出的二维码图像。将画布上的图像转换为DataURL格式,通过img标签显示在页面上,或者直接将DataURL传给后端,生成可供下载的二维码图片。 内容概览: 一、前端生成二维码二、后端生成二维码附:下载二维码 一、前端生成二维码 package.json 引入依赖: “qrcodejs2”: “0.0.2”代码中引入并使用 点击刷新二维码 import QRCode from 'qrcodejs2'; export default { name: 'Template', data() { return { originUrl:'http://www.baidu.com' } }, methods: { refreshQrCode() { this.$nextTick(function () { document.getElementById("qrCodeUrl").innerHTML = ""; let qrCodeUrl = new QRCode("qrCodeUrl", { width: 250, height: 250, text: this.originUrl, #这里就是二维码内的信息,一般可以扫描连接进行调整或其他 colorDark: "#409EFF", colorLight: "#fff" }); }); } } }其他根据业务逻辑进行展示和处理就行。 二、后端生成二维码后端生成二维码的轮子就更多了,一层套一层的,我们可以选择一个最为简单的,就是引入hutool的依赖,当然觉得重的,可以自己选用zxing原生实现即可。 pom文件引入: cn.hutool hutool-all 5.8.12 com.google.zxing core 3.4.1 样例代码: @GetMapping("qrcode") @ResponseBody public void generateQrcode(HttpServletRequest request, HttpServletResponse response){ String qrCodeUrl = "http://www.baidu.com";//需要生成的内容 try { QrConfig qrConfig = new QrConfig(300, 300); //imageType可选:"gif";"jpg";"jpeg";"bmp";"png";"psd";"gif";"jpg";"jpeg";"bmp";"png";"psd"; QrCodeUtil.generate(qrCodeUrl, qrConfig, "png", response.getOutputStream()); System.out.println("生成二维码成功!"); } catch (QrCodeException | IOException e) { System.out.println("发生错误! {}!"+ e.getMessage()); } }前端可以使用流来接收,将图片呈现出来,也可以直接当做图片下载 # 接收数据展示以上都是直接有的轮子,开箱即用。 附:下载二维码通常页面查看了二维码都会附加下载,将二维码放到其他渠道引流,所以以上是能够从接口或者前端页面获取到二维码的预览了,那么想下载怎么操作呢? 接口部分,直接在浏览器请求接口数据,浏览器就能自动预览,你可以通过截图等方法直接拿到二维码文件。 前端页面部分,我们以来的qrcodejs的组件已经将二维码信息渲染在页面上了,基本思路是可以获取页面渲染的图片数据,直接通过按钮触发标签的形式将页面数据下载。 以下为样例代码: download() { let myCanvas = document.getElementById('qrCode').getElementsByTagName('canvas'); let a = document.createElement('a') a.href = myCanvas[0].toDataURL('image/png'); a.download = '二维码'; a.click() this.$message({ message: "二维码正在进行下载保存", type: 'success' }) } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |