vue使用qrcode生成二维码,可以自定义大小
1,qrcanvas-vue插件,https://gera2ld.github.io/qrcanvas-vue/#logo。只支持像素大小的二维码 2,qrcode支持移动端自定义大小二维码 "qrcode": "^1.2.2",
import QRCode from 'qrcode';
<div class="qrcode_box">
<canvas class="qrcode"></canvas>
</div>
_this.urlData为请求过来的url地址 渲染:
var canvas = document.querySelector('canvas')
QRCode.toCanvas(canvas, this.urlData)
css:
生成二维码之后在canvas标签里有style样式(单位为px),!important的层级比style要高,实现自定义大小
.qrcode_box{
width: 4rem!important;
height: 4rem!important;
margin:rem(40) auto 0;
.qrcode{
width: 4rem!important;
height: 4rem!important;
}
}
vue使用qrcode生成二维码,可以自定义大小的更多相关文章
- vue 使用QRcode生成二维码或在线生成二维码
参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...
- C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
- Qrcode生成二维码的参数总结 及最小尺寸的测试
Qrcode生成二维码,做过很多实验,探索最小规格的二维码到底是多少尺寸,和最高规格的二维码到底是多大尺寸.现在我总结总结: 有两种思路: 1.生成规格高的二维码,然后压缩到自己想要的尺寸的二维码.这 ...
- qrcode 生成二维码
qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- C#Qrcode生成二维码支持中文,带图片,带文字
C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...
- python_使用qrcode生成二维码
1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
- QRCode生成二维码,jq QRCode生成二维码,QRCode生成电子名片
[QRCode官网]http://phpqrcode.sourceforge.net/ PHP QRCode生成二维码 官网下载QRCode源码包,引入源码包中的 qrlib.php . <?p ...
随机推荐
- 洛谷 P2677 超级书架 2 题解
传送门 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= ...
- c#优秀文章
文件传输示例]C# WinForm WebSocket (非浏览器):http://bbs.cskin.net/thread-4431-1-1.html NanUI for Winform发布,让Wi ...
- 1.1、Logistics Regression模型
1.线性可分VS线性不可分 对于一个分类问题,通常可以分为线性可分与线性不可分两种 .如果一个分类问题可以使用线性判别函数正确的分类,则称该问题为线性可分.如图所示为线性可分,否则为线性不可分: 下图 ...
- hdu 1754 I Hate It 线段树基础题
Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求, ...
- 【研究】Tomcat远程代码执行漏洞(CVE-2017-12615)
一.Tomcat远程代码执行漏洞(CVE-2017-12615) 1.1 实验环境 操作机:windows 10 IP:192.168.1. ...
- PIE SDK矢量数据的读取
1.功能简介 GIS将地理空间数据表示为矢量数据和栅格数据.矢量数据模型使用点.线和多边形来表示具有清晰空间位置和边界的空间要素,如控制点.河流和宗地等,每个要素被赋予一个ID,以便与其属性相关联.栅 ...
- 网站ico那点事儿
一. 如何获取某个网站的favicon.ico http://moco.imooc.com/player/report.html 今天看到这个网站上,左侧的小图片挺好看的,想弄下来,检查源码,也没有看 ...
- linux 入门命令总结
1,tree -d /etc/ 参数表示只显示目录 -f 显示内容的完整 -i 不显示树枝显示完整路径2,mkdir -p 递归创建多级目录 -v 显示创建目录的过程 -m 设置目录的默认权限 mkd ...
- python 爬虫系列05--丑事百科
丑事百科爬虫 import re import requests def parse_page(url): headers = { 'User-Agent':'user-agent: Mozilla/ ...
- apply、call、bind区别、用法
apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向): 如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是 ...