如何基于原生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 相关文章推荐
九种js弹出对话框的方法总结
Mar 12 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
基于node.js之调试器详解
Aug 22 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 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
php foreach、while性能比较
2009/10/15 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 调用HBase的简单实例
2016/12/18 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
高一英语教学反思
2014/01/22 职场文书
超市总经理岗位职责
2014/02/02 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
医学求职信
2014/05/28 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python