vue url生产二维码
<template>
<div id="QRcode">
<div class='QR-qrcode' style='display:none;'></div>
</div>
</template>
<script> import QRCode from 'qrcode-js-package' export default {
data () {
return { }
},
props: {
size: {
type: Number,
default: 180,
},
value: {
type: String,
default: '',
},
},
watch:{
"$parent.qrText"(newVal){
this.getQRcodeImg((base64)=>{
document.getElementsByClassName("QR-download")[0].href = base64 ;
});
},
},
methods: {
concatCanvas(dom,canvas1,padding){
/**
* @param {Number} padding 图片的padding,默认20
* @return {String} 返回base64字符串
*
*/
var c1h = canvas1.height,
c1w = canvas1.width,
context='',
canvas = document.createElement("canvas");
padding = padding || 20 ;
canvas.height = c1h + 2.5 * padding ;
canvas.width = c1w + 2 * padding ;
/** end **/
dom.appendChild(canvas);
/** 将canvas画上白色背景 **/
context = canvas.getContext("2d");
context.fillStyle ="white";
context.fillRect(0,0,canvas.width,canvas.height);
/** end **/ context.drawImage(canvas1, padding, padding, c1w ,c1h);
/** end **/
/** 返回base64,用于注入到a标签里以便下载 **/
return canvas.toDataURL('image/jpeg',1);
/** end **/
},
getQRcodeImg(fn,s){
let url = s||this.value,
size = this.size,
dom = document.getElementById("QRcode"),
$qrcode = dom.getElementsByClassName("QR-qrcode")[0],
$main = dom.getElementsByClassName("QR-main")[0]; new QRCode($qrcode, {
text: url,
width: size,
height: size,
correctLevel : QRCode.CorrectLevel.H
});
let base64 = this.concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],15);
fn && fn(base64);
}
},
}
</script>
结果:
vue url生产二维码的更多相关文章
- 用vue实现扫描二维码跳转页面功能
怎么能用vue实现扫描二维码跳转页面功能 1. 安装依赖 npm install vue-qr --save 2. <template> <div> <div ...
- vue 实现 扫二维码 功能
前段时间一直在研究,如何通过 vue 调用 相机 实现 扫一扫的功能,但是查看文档发现,需要获取 getUserMedia 的属性值,但存在兼容性问题. 退而求其次,通过 h5plus 来实现. 1. ...
- vue生成条形码/二维码/带logo二维码
条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...
- windows phone 生产二维码和解码本地二维码图片
前面模仿着写了一个手机扫描二维码和条形码的例子,zxing(下载)的Silverlight库实现的,当时还纳闷有windows phone的库为什么不用,其实都是一样的,,,要改的就是获取摄像头获取的 ...
- vue 中生成二维码之爬坑之路
最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...
- js将url转换二维码
二维码生成库 qrcode.js /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /** * @fileovervi ...
- iOS 根据url生成二维码贴到底图上
根据url 生成指定尺寸的二维码图片 UIImage * createBinaryCodeImg(const char * url ,CGFloat size) { //create binary c ...
- Android 把url生成二维码并贴到给定的底图上
主要是用到了com.google.zxing jar包生成二维码的功能,这个jar包需要自己接下载 直接上代码 public static Bitmap CreateBinaryCodeImageBy ...
- SpringMVC将url生成二维码图片直接展示在页面上
利用google的开源包zxing生成二维码 第一步:maven项目的zxing依赖 <!-- google zxing 生成二维码 --> <dependency> < ...
随机推荐
- mysql++使用
Mysql++是官方发布的.一个为MySQL设计的C++语言的API.Mysql++为Mysql的C-Api的再次封装,它用STL(Standard Template Language)开发并编写,并 ...
- python基础之if语句
python之if语句 通用格式 if <test1>: <do something> elif: <do something> else: <do some ...
- viewport 编写 iPhone Friendly 的 Web 应用程序
在了解到iPhone的一些常见布局法后,我们就可以开始着手编写一个真正能在iPhone上跑的页面了.小声说一句,之前我说要布局讨论完了,要进入交互逻辑开发,后来细心一想发现不行,有些东西不讲的话将会对 ...
- Codeforces Round #534 (Div. 2) Solution
A. Splitting into digits Solved. #include <bits/stdc++.h> using namespace std; int n; void sol ...
- extern--C#调用C++等其他非托管代码
例如: https://www.cnblogs.com/sosoft/p/extern.html
- wamp server 3.0.0 修改默认浏览器,软件语言和配置文件编辑器
改默认IE浏览器为Chrome: wampmanager.conf : navigator ="C:\Program Files (x86)\Google\Chrome\Applicatio ...
- Anchor、Dock
转:http://blog.sina.com.cn/s/blog_7f7cd96601013trt.html 在设计可供用户调整大小的窗体时,如何实现该窗体上的控件也应能正确地随窗体的改变而自动调整大 ...
- HBase优化相关
1.HBase预分区 HBase在创建表时,默认会自动创建一个Region分区.在导入数据时,所有客户端都向这个Region写数据,直到这个Region足够大才进行切分.这样在大量数据并行写入时,容易 ...
- linux下查看当前登陆的用户数目
在shell下输入以下语句即可获取: who | awk '{print $1}' | sort | uniq | wc -l
- 现在 做java 构架(RabbitMQ redis mysql )之类的
现在 做java 构架(RabbitMQ redis mysql )之类的