最近在做一个移动端的项目, 里边有一个需求是生成链接并且同时把链接转换成二维码的需求, 效果图如下:
涉及到隐私, 打个码
因为用的是 vue 框架, 而且是第一次做这中需求的东西, 于是果断百度了一波, 出来了一堆 什么 qrcodejs2 各种各样的, 一帮人抄来抄去, 能不能亲自试完了再抄啊? 害我挨个爬坑. 这里就给大家分享几个简单易懂用起来得劲的!
如果你的项目需求单纯的只是需要将链接转换成二维码的话, 这里比较好用的推荐 "@xkeshi/vue-qrcode" 插件;
用法如下:
第一步: 安装 @xkeshi/vue-qrcode.JS 包
NPM install --save @xkeshi/vue-qrcode // 安装到生产环境
第二步: 组件中使用
- template
- <div class="qrcodeBox">
- <qrcode :value="xxx" v-if="xxx"></qrcode>
- <!-- v-if="xxx" 是为了防止链接没获取到显示空白, 确保获取到链接后才开始渲染 -->
- </div>
- script
- import Qrcode from "@xkeshi/vue-qrcode"; // 引入
- data(){
- xxx:" " // 获取到的链接
- }
- // 注册生成二维码组件
- components: {
- qrcode: Qrcode
- },
- methods:{
}
这样是不是很简单? 只要 xxx 的转换, 二维码就会自动更新, 不需要进行过多的操作.
如果给你的需求不仅仅是生成二维码这么简单, 还需要在移动端实现长按保存那么就得换另外一种了, 下边为大家来介绍 qrcode.JS;
QRCode.JS
QRCode.JS 是一个用于生成二维码的 JavaScript 库. 主要是通过获取 DOM 的标签, 再通过 html5 Canvas 绘制而成, 不依赖任何库.
基本用法
- HTML
- <div id="qrcode"></div>
- script
- <script type="text/javascript">
- // 设置要生成二维码的链接
- new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");
- </script>
或者使用一些可选参数设置:
- var qrcode=new QRCode("qrcode",{
- text: "http://baidu.com",
- width:120,
- height:120,
- coloeDark:"#000000",
- coloeLight:"#ffffff",
- correctLevel:"QRCode.CorrectLevel.H"
- })
同样我们可以使用以下方法:
- qrcode.clear(); // 清除代码
- qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
浏览器支持
支持该库的浏览器有: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等, 兼容性强.
那么在 vue 中怎么使用呢?
第一步: 安装 qrcode.JS 包
NPM install qrcode --save-dev
第二步: 在 vue 中引入
- import QRCode from 'qrcode';// 如果有很多页面使用的话可以在 main 中引入, 挂载在全局;
- template
- <div id="code">
- <canvas id="canvas"></canvas>
- </div>
- script
- components: {
- QRcode:QRCode // 注册组件
- }
- methods:{
- getUrl(xxx){
- var canvas=document.getElementById("canvas"); // 获取到 canvas
- var code=document.getElementById("code"); // 获取到 code 容器
- QRCode.toCanvas(canvas,xxx, error=> {
- if (error) console.error(error);
- console.log("success!");
- });
- var image = new Image(); // 实例一个 img
- image.src = canvas.toDataURL("image/png"); // 转换成 base64 格式路径的 PNG 图片
- image.style.width = "100%"; // 设置样式
- code.appendChild(image); // 添加到 code 容器中
- canvas.style.display = "none"; // 隐藏掉 canvas
- }
- }
- mounted(){
- var xxx="www.baidu.com";
- this.getUrl(xxx);
- }
在这里用到的思路其实就是将链接先转换成二维码, 然后再用 canvas 调用 toDataURL() 的方法得到以 base64 编码的 url, 然后用 img 标签加载出来, 至于为什么非得转换成图片呢? 这就是利用了图片在移动端浏览器中或者微信中都是有自带的长按响应事件的, 当你长按对象是图片的话就会提示你保存图片, 下附效果图:
在这里提醒大家, 以后从网上找东西的时候一定要自己多去尝试一下, 切记!
来源: http://www.jianshu.com/p/70be0edb7914