如何基于原生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 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
js格式化时间的方法
Dec 18 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue购物车插件编写代码
Nov 27 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
学习ExtJS border布局
2009/10/08 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
使用js 设置url参数
2013/07/08 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
jsonp跨域请求详解
2017/07/13 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python使用knn实现特征向量分类
2018/12/26 Python
python写一个随机点名软件的实例
2019/11/28 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
大学开学感言
2015/08/01 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript