苏州网站设计公司兴田德润怎么样,设计感十足的网站,网站qq代码生成,广告平面设计作品文章目录 前言1、浏览器支持2、优点3、缺点4、相关方法5、安装及使用示例 前言
qrcode 是一个基于JavaScript的二维码生成库#xff0c;主要是通过获取 DOM 的标签#xff0c;再通过 HTML5 Canvas 绘制而成#xff0c;不依赖任何库。
官方文档#xff1a;https://www.npm… 文章目录 前言1、浏览器支持2、优点3、缺点4、相关方法5、安装及使用示例 前言
qrcode 是一个基于JavaScript的二维码生成库主要是通过获取 DOM 的标签再通过 HTML5 Canvas 绘制而成不依赖任何库。
官方文档https://www.npmjs.com/package/qrcode
1、浏览器支持
qrcode理论上支持所有现代浏览器以及部分老版本浏览器。具体而言只要这些浏览器支持HTML5 Canvas和/或DOM操作就可以使用 qrcode 来生成二维码具体的有IE6~10 Chrome FirefoxSafariMobile SafariOperaAndroid Windows MobileMicrosoft Edge等。
2、优点
1客户端实时生成无需服务器端干预可以在浏览器端直接生成二维码减少服务器负载和网络传输成本使得动态内容的二维码生成更加便捷。例如根据用户输入或当前页面URL生成二维码。
2轻量级qrcode.js 是一个轻量级的库体积小易于引入到项目中不会显著增加网页加载时间。
3易用性API设计简单只需要几行代码就可以将文本转换为二维码并且可以灵活地控制生成二维码的各种参数如纠错级别、大小等。
4跨平台兼容性基于HTML5 Canvas或DOM元素绘制适用于大部分现代浏览器包括桌面端和移动端。
5动态更新由于是在客户端生成因此能够实现动态内容的实时更新比如在网页上显示不断变化的数据对应的二维码。
6无额外图片资源不需要上传或存储预生成的二维码图片减少了文件存储空间的需求和维护工作。
7可嵌入Web应用与网站其他功能集成紧密可以方便地将生成的二维码内嵌到网页的任何位置实现良好的用户体验。
8自定义扩展虽然原始库可能不支持一些高级特性如Logo添加但因为是开源项目开发者可以根据需要对源码进行修改和扩展来满足个性化需求。
3、缺点
1不支持中文直接编码根据提及的信息原始版本的 jquery.qrcode 插件可能不支持直接将包含中文的文本转换为二维码。在处理非ASCII字符时需要先对中文内容进行URL编码或其他转码操作。
如果将用中文来生成二维码然后用微信扫描生成的二维码会看到如下提示
2LOGO添加功能缺失该插件本身并未提供集成Logo图像到二维码中心的功能。如果需要带有Logo的二维码需要额外开发或寻找其他支持此功能的库。
3兼容性问题在不同浏览器间可能存在兼容性差异比如在较老版本的IE浏览器如IE7/8中生成的二维码图片尺寸可能会与现代浏览器如Chrome、Firefox等显示的不同这可能需要开发者针对特定环境做特殊处理。
4尺寸和分辨率限制对于较大的数据量或者更高级别的纠错级别生成的二维码可能会变得很大并且由于是基于HTML5 Canvas或DOM元素绘制可能受限于设备屏幕大小或渲染能力导致部分区域无法完整显示。
5性能优化不足在某些低性能设备上尤其是在大量生成或频繁更新二维码的情况下JS实时生成可能比服务器端生成和返回静态图片的方式效率更低。
6功能相对基础相比于一些更全面的库qrcode 提供的功能较为基础例如缺乏高级定制选项如颜色自定义、样式美化等。
4、相关方法
关于API的详细使用方法和Option配置项可参看https://www.npmjs.com/package/qrcode#api
浏览器端
1create(text, [options])创建二维码并返回一个qrcode对象。
2toCanvas(text, [options], [cb(error, canvas)]), 将二维码绘制到画布上。
3toDataURL(canvasElement, text, [options], [cb(error, url)])返回一个数据 URI其中包含二维码图像的格式这种方法也是使用 Canvas作为画布来生成数据 URI。
4toString(text, [options], [cb(error, string)])返回二维码的字符串格式。
服务端
同上的4个方法此外还多出如下2个方法
5toFile(path, text, [options], [cb(error)])将二维码保存为文件如果没有指定 options.type将从文件扩展名猜测格式可识别的扩展名是 png、 svg、 txt。
6toFileStream(stream, text, [options])将二维码图像变成文件流目前只能使用 png 格式。
5、安装及使用示例
在vue项目中使用先安装npm install --save qrcode
// vue2项目使用示例
templatedivel-button typeprimary clickhandleGetQRCodevue2中获取qrcode生成的二维码/el-buttondivcanvas idQRCode/canvas/divdiv
/templatescript
import QRCode from qrcode;export default {data() {return {qrcode: };},methods: {async handleGetQRCode() {const element document.getElementById(QRCode);const url https://blog.csdn.net/ganyingxie123456;QRCode.toCanvas(element, url);}}
};结果
// vue3项目使用示例
templatea-button typeprimary clickhandleGetQRCodevue3获取qrcode生成的二维码-简单版/a-buttondiv classqrcodeimg :srcqrcode //diva-button typeprimary clickhandleGetQRCode2qrcode生成的二维码-增加配置版/a-buttondiv classqrcodeimg :srcqrcode2 //div
/templatescript langts setup
import { ref } from vue;
import QRCode from qrcode;const url https://blog.csdn.net/ganyingxie123456;const qrcode ref();
const handleGetQRCode async () {qrcode.value await QRCode.toDataURL(url);
};const qrcode2 ref();
const handleGetQRCode2 () {const option {errorCorrectionLevel: H, // 可选容错级别值有 L低、M中、Q高、H最高默认为Htype: image/jpeg, // 可选生成的二维码类型quality: 0.3, // 可选二维码质量margin: 5, // 可选二维码留白边距1color: {dark: #0A7AFF, // 可选前景色格式必须是十六进制的如果不是则会报错比如blue或rgb(255,245,255)等light: #F73128, // 可选背景色格式同上},};QRCode.toDataURL(url, option, (error: any, resultUrl: any) {if (error) {throw error;}qrcode2.value resultUrl;});
};
/scriptstyle scoped
.qrcode {width: 200px;height: 200px;
}
/style结果如下 OK至此结束
