项目中使用: <vue-qr :text="generate_code_str" :size="200" :margin="10" :logoSrc="logoUrl" ></vue-qr>用到的属性:text 是生成二维码的内容,比如一个网址 或者 代表一张券的code码等size 二维码的宽度和高度margin 设置的二维码外边距logoSrc 是二维码中心的小图遇到的问题: 生成的二维码调微信扫一扫识别的时候特别慢(识别之后要跳转到其他页面)原因: 生成二维码的<img> 添加了css样式 transform:sca...
npm install qrcodejs2 --save这里的效果可以实现在安卓或者苹果手机支持长按功能扫描。html <div id="qrcode" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;display: none"></div><img :src="src" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;" >一开始我没有用img,在安卓手机不能长按识别出来,就苹果可以。 然后呢, 按我写法就可以了。 原理就是用拿到插件生成img 的 s...
在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载
简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报
1. 设置相应比例一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述
import posterBgImg from ../public/images/poster_bg.png;// 海报底图
import qrcodeImg from ../public/images/qrcode.png;// 二维码
export defaul...
<div id="qrcode" @click="aa"></div>
?methods:?{? ?aa(){//点击下载二维码保存到本地
? ? ? setTimeout(()=>{
? ? ? 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({
? ? ? ? ? ?showClose:?true,
? ? ? ? ? ?m...
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言一、vue 项目中生成条形码(jsbarcode)二、vue中使用二维码插件1.使用方法2.贴心小提示
三、vue的打印插件总结前言
提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考
一、v...
今天用vue测试一下二维码的生成效果。在网上找了qrcodejs2好像挺容易上手的,但实际上我按照网友的步骤,结果根本无法显示二维码。
提示的错误就是qrcodejs2的源代码问题。当然也可能是什么模块版本的问题,blabla,反正就是让人搞得很烦。
我只想安安静静地显示一个二维码,今天下午却搞了好久的模块版本兼容性问题。
最后我采用了vue-qr这个工具,上手也很容易,官方文档如下
https://www.npmjs.com/package/vue-qr
下面是我的...