如何基于原生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 相关文章推荐
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python之用户输入的实例
2018/06/22 Python
使用tensorflow实现线性svm
2018/09/07 Python
django中的图片验证码功能
2019/09/18 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
英文版餐饮业求职信
2013/10/18 职场文书
就业自荐信
2013/12/04 职场文书
校长就职演讲稿
2014/01/06 职场文书
迟到检讨书大全
2014/01/25 职场文书
小班秋游活动方案
2014/02/22 职场文书
低碳环保倡议书
2014/04/14 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
三八妇女节致辞
2015/07/31 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android