如何基于原生javaScript生成带图片的二维码


Posted in Javascript onNovember 21, 2019

这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

使用链接生成二维码主要是使用qr.js或者其他,把链接转化为二维码的形式,在使用canvas时需要设置画布的尺寸,生成的颜色。

<div class="qr_code">
  <img src="" id="imgcode" />
  <canvas ref="canvas" hidden></canvas>
<div>

js

  function createQr () { // 生成带图片二维码
   const qrcode = qr('http://baidu.com') // 转化链接
   const canvas = this.$refs.canvas
   const ctx = canvas.getContext('2d')
   const size = 128 / qrcode.moduleCount //128设置的二维码尺寸
   const scale = window.devicePixelRatio / getPixelRatio(ctx)
   canvas.height = canvas.width = 128e * scale
   ctx.scale(scale, scale)
   qrcode.modules.forEach((row, rdx) => {
    row.forEach((cell, cdx) => {
     ctx.fillStyle = cell ? '#000' : '#fff' // 设置二维码颜色和背景颜色
     var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
     ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
    })
   })
   var image = document.createElement('img')
   var imgcode =  document.getElementById('imgcode')
   image.src = 'http://baidu/logo.png' //二维码中间图标
   image.onload = () => {
    var dwidth = 128 * 0.2 // 设置图片大小
    var dx = (128 - dwidth) / 2
    var dheight = image.height / image.width * dwidth
    var dy = (this.size - dheight) / 2
    image.width = dwidth
    image.height = dheight
    ctx.drawImage(image, dx, dy, dwidth, dheight)
    imgcode.src = canvas.toDataURL()
   }
 },
 getPixelRatio (ctx) {
   return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
Javascript的比较汇总
Jul 25 Javascript
vue组件生命周期详解
Nov 07 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 #Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 #Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 #Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php pdo操作数据库示例
2017/03/10 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
python thread 并发且顺序运行示例
2009/04/09 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
linux面试题参考答案(11)
2016/11/26 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
党员发展大会主持词
2015/07/03 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书