js 生成二维码图片
JS 图片 生成 二维码
2023-09-14 08:58:49 时间
1.用纯JavaScript实现的微信二维码图片生成器
QRCode.js是javascript实现二维码(QRCode)制作生成库。 QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5的 Canvas,低版本IE使用table元素绘制),而且QRCode.js没有任何依赖。只需要引用一个JS。
兼容: 几乎支持所有浏览器: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile
项目地址: http://davidshimjs.github.io/qrcodejs/
github 地址: https://github.com/davidshimjs/qrcodejs
// 基本使用, 首先需要添加对qrcode.js的引用,并创建一个空DIV
<script> new QRCode(document.getElementById("qrcode"), "http://www.ssports.com/"); </script>
// 更多参数可以选
var qrcode = new QRCode("test", { text: "http://jindo.dev.naver.com/collie", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H });
// 你可以动态地改变二维码图片
<script> qrcode.clear(); qrcode.makeCode("http://naver.com"); </script>
2.SVG矢量图用来生成二维码图片
JsBarcode 是一个生成条形码的开源库支持的有: CODE128 CODE128 (自动模式切换) CODE128 A/B/C (强制模式)等,在现代流量器上它会生成一个SVG矢量图用来生成条形码,使用如下
项目主页: https://github.com/lindell/JsBarcode
// 基本使用
var JsBarcode = require('jsbarcode'); var Canvas = require("canvas"); var canvas = new Canvas(); JsBarcode(canvas, "Hello"); // Do what you want with the canvas // See https://github.com/Automattic/node-canvas for more information
3.H5实现的JavaScript扫码库
quaggaJS是由H5实现的JavaScript扫码库,能将条形码扫描成文字,支持静态图片和视频流的扫描。
项目主页 https://github.com/serratus/quaggaJS
// 使用方法
Quagga.init({ inputStream : { name : "Live", type : "LiveStream", target: document.querySelector('#yourElement') // Or '#yourElement' (optional) }, decoder : { readers : ["code_128_reader"] } }, function(err) { if (err) { console.log(err); return } console.log("Initialization finished. Ready to start"); Quagga.start(); });
4.这里有一个Server端使用Node.JS生成二维码图片的库,有兴趣的同学也可以研究一下
相关文章
- js省市区三级联动
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- window.addEventListener来解决让一个js事件执行多个函数
- 纯js实现复制到剪贴板功能
- 【前端】js转码
- 轻松搭建基于 Serverless 的 Egg.js Web 应用
- [Node.js] Mock an API for Local Development in React with Mirage JS
- vue.js $refs和$emit 父子组件交互
- JS魔法堂:不完全国际化&本地化手册 之 拓展篇
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
- js 点击列表li,获得当前li的id
- vue.js 3.2.22:多选上传图片带缩略图可删除
- 华为OD机试 - 玩牌高手(Java & JS & Python)
- JS数组对象排序(es6)
- canvas2image.js将canvas保存为图片(将HTML5画布Canvas的内容保存为本地图片并下载)
- Typora+PicGo+Gitee+ node.js四大神器 实现自动图片上传功能 妈妈再也不用担心我的图床的问题了 图解过程 容易到没有朋友
- js深度复制
- 【JS高级】js面向对象三大特性之继承_06
- js随机飘动的广告图片代码demo效果示例(整理)
- JS中循环遍历数组的四种方式总结、JS数组常用的操作方法