如何基于原生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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
ant design charts 获取后端接口数据展示
May 25 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python同步windows和linux文件
2019/08/29 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
好人好事事迹材料
2014/02/12 职场文书
《太阳》教学反思
2014/02/21 职场文书
班主任对学生的评语
2014/04/26 职场文书
公民代理授权委托书
2014/09/24 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
高中开学感言
2015/08/01 职场文书
军训后的感想
2015/08/07 职场文书