如何基于原生javaScript生成带图片的二维码

2025-11-09 21:59:03

这篇文章主要介绍了如何基于原生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
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

QRCode.js二维码生成并能长按识别

QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 首先引入QRCode.js文件,下载地址如果生成二维码的信息是固定不变的,那么当然不需要如此这般,网上有好多现成的二维码生成器,直接用就好. 可是,我的需求是这样的,二维码用于在微信或QQ中分享,根据不同的用户信息分别生成不同的二维码,这样就不能偷懒,就得用代码生成了,并且生成的二维码支持长按识别进入. 话不多说,直接上干货: htm
nodejs实现超简单生成二维码的方法

本文实例讲述了nodejs实现超简单生成二维码的方法.分享给大家供大家参考,具体如下: 一开始使用node-qrcode(https://github.com/soldair/node-qrcode),结果安装的时候需要安装python,且不支持python3.0以上,安装python2.0的时候又需要安装其他的环境,所以放弃了. 最后选择了一个小众的插件qr-image(https://github.com/alexeyten/qr-image) 前台页面如下 views/index.ejs
Angular JS 生成动态二维码的方法

一.场景二维码的场景,很多.这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接- 技术实现,如果用后端实现,需要构造输出一个图片流.或者后端生产二维码图片,给图片地址就好了.弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储.太费力. 如果前端实现,这样就很轻松了.这只是个分享二维码,分享出去给人家扫一扫.利用前端的 canvas,这里坐下调研. jq 封装的 qrcode.js ,文章网上一大堆. angular js :https://github.c
JS调用安卓手机摄像头扫描二维码

项目要求: 使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容大多数浏览器本地识别不占用服务端资源代码比较简单只有一个页面 <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>Web QrCode Test</t
JS实现将链接生成二维码并转为图片的方法

本文实例讲述了JS实现将链接生成二维码并转为图片的方法.分享给大家供大家参考,具体如下: <div id="code"></div> <img id="img"/> <script type="text/javascript"> var qrcode=$("#code").qrcode({ render:'canvas||table', width: 200, //宽度 heig
JS实现鼠标移上去显示图片或微信二维码

废话不多说了,直接给大家贴代码了. <html> <head> <script type="text/javascript"> function showImg(){ document.getElementById("wxImg").style.display='block'; } function hideImg(){ document.getElementById("wxImg").style.displa
nodejs动态创建二维码的方法

本文实例为大家分享了nodejs动态创建二维码的具体代码,供大家参考,具体内容如下  <div class="qrcode"> <div> <p id="saoma">扫描二维码</p> </div> </div> js代码: $.ajax({ type: 'POST', url: '/house', data: { data:'你的数据' }, dataTy
js canvas实现二维码和图片合成的海报

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
如何基于原生javaScript生成带图片的二维码

这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下使用链接生成二维码主要是使用qr.js或者其他,把链接转化为二维码的形式,在使用canvas时需要设置画布的尺寸,生成的颜色. <div class="qr_code"> <img src="" id="imgcode" /> <canvas ref=
Javascript生成带参数的二维码示例

前言在最近的项目中有个需求是要生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实,下面话不多说,直接上实现的过程. 引入js: require.config({ baseUrl : "/", paths: { jquery:'plugin/jquery/jquery-3.1.0.min', qrcode:'plugin/qrcode/qrcode' } }); require( [ 'jquery', 'qrcode'
微信接口生成带参数的二维码

为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 用户扫描带场景值二维码时,可能推送以下两种事件: (1)如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者. (2)如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值扫描事件推送给开发者. 获取带参数的二维码的过程包括两步:(I)首先创建二维码ticket:(II)然后凭借ticket到
微信开发生成带参数的二维码的实例

微信开发生成带参数的二维码的讲解在微信公众号平台开发者那里,在"账号管理"那里,有一项功能是"生成带参数的二维码",通过这儿生成的二维码,只要通过微信扫一扫之后,会把事件自动推送到微信公众号上用微信扫一扫推送到开发者网址那儿的数据如下: <xml><ToUserName><![CDATA[gh_452****b0f2]]></ToUserName> <FromUserName><![CDATA[o
C#生成带logo的二维码

带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类 QRCodeHelper.cs ,直接调用 CreateQRCodeWithLogo 方法,传入相应参数返回bitmap类型的数据,直接将返回的数据绑定到图片控件,如果是web可以先将图片保存到服务器指定地址在获取显示 /// <summary> /// 生成带logo二维码 /// </summa
Thinkphp3.2.3整合phpqrcode生成带logo的二维码

Thinkphp中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能. 下载phpqrcode 下载地址:http://phpqrcode.sourceforge.net/ 整合到Thinkphp框架在"ThinkPHP\Library\Vendor\"下新建目录phpqrcode,将压缩包内容解压到该文件夹下. 调用phpqrcode生成二维码在IndexController控制器下添加如下方法: public function qrcode($ur
Python3批量生成带logo的二维码方法

最近有个需求:批量生成带Logo的二维码生成二维码比较简单,网上的资源也比较多,不赘述了.自己研究了一下加了logo并且美化了一下(网上的资源直接加Logo特别丑!!!忍不了!!!),直接上代码: def create_qrcode(url, filename): qr = qrcode.QRCode( version=1, #设置容错率为最高 error_correction=qrcode.ERROR_CORRECT_H, box_size=10, border=4, ) qr.add_da
php微信开发之批量生成带参数的二维码

带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平台开发者文档(http://mp.weixin.qq.com/wiki/18/28fc21e7ed87bec960651f0ce873ef8a.html) ,我这里就直接上代码. 演示图: 由于带参数二维码生成是有限的,所有我是按编号生成的,下次生成的时候直接累加. 另外带设置有备注,方便以后统
Java生成中间logo的二维码的示例代码

最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司的logo是不是好一点?加上吧, 加上公司logo之后,产品经理想了想,每个商品都有个二维码,销售人员有很多个商品二维码,群发给用户,在qq群上,微信群上,怎么知道哪个二维码对应哪个商品的呢?于是决定要加上商品名称.最后商品二维码就成了下面这个模样了(当然啦,这里面的logo并不是博主现职公司的).
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

本文实例为大家分享了支持中文,且带logo的二维码的生成代码,供大家参考,具体内容如下资料搜索选择star最多的两个第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 //qrcode.js function QR8bitByte(data) { this.mode = QRMode.MODE_8BIT_BYTE; this.data = da

如何基于原生javaScript生成带图片的二维码

相关推荐

随机推荐