如何基于原生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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
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
php教程之phpize使用方法
2014/02/12 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php验证session无效的解决方法
2014/11/04 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
原始的js代码和jquery对比体会
2013/09/10 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
深入分析原生JavaScript事件
2014/12/29 Javascript
java必学必会之static关键字
2015/12/03 Javascript
详解Document.Cookie
2015/12/25 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
什么是Python包的循环导入
2020/09/08 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
sort命令的作用和用法
2012/11/04 面试题
如何理解transaction事务的概念
2015/05/27 面试题
甲乙双方合作协议书
2014/10/13 职场文书
领导欢迎词范文
2015/01/26 职场文书
民间借贷被告代理词
2015/05/23 职场文书