说到简单,使用已有 API 当然是最简单的,但自建后端有一定成本,公共 API 又容易失效,不如用 js
封装一个只依赖浏览器且永不失效的前端 API 吧。
Example
引入 JS
依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展
,将以下代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)
,也可直接加入到主题对应的 header.php
中的 </head>
标签前。
JavaScript Code
- <script>
- // QRCODE API
- document.addEventListener('DOMContentLoaded', initQrcode);
- function initQrcode() {
- const common = {
- loadResource: function (id, resource, type, callback) {
- let loaded = document.head.querySelector('#' + id);
- if (loaded) {
- callback();
- return;
- }
- const element = document.createElement(type);
- element.onload = element.onreadystatechange = () => {
- if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
- element.onload = element.onreadystatechange = null;
- loaded = true;
- callback();
- }
- }
- if (type === 'link') {
- element.rel = 'stylesheet';
- element.href = resource;
- } else {
- element.src = resource;
- }
- element.id = id;
- document.getElementsByTagName('head')[0].appendChild(element);
- },
- loadResources: function (callback) {
- const cdn = '//s0.pstatp.com/cdn/expire-1-M';
- const resources = ['/jquery.qrcode/1.0/jquery.qrcode.min.js'];
- let unloadedResourceCount = resources.length;
- resources.forEach(resource => {
- this.loadResource(btoa(resource).replace(/[=+\/]/g, ''), cdn + resource,
- ({
- 'css': 'link',
- 'js': 'script'
- })[resource.split('.').pop()],
- () => --unloadedResourceCount ? null : callback()
- );
- });
- },
- initOptions: function (source, options) {
- options = options || {};
- 'text size border'.split(' ').forEach(key => {
- const value = source instanceof URLSearchParams ? source.get(key) : source.getAttribute(key);
- if (value) {
- if (key === 'size') {
- options.width = value;
- options.height = value;
- } else {
- options[key] = value;
- }
- }
- });
- return options;
- },
- makeQrcode: function (source, options) {
- const div = document.createElement('div');
- jQuery(div).qrcode(options);
- const canvas = div.querySelector('canvas');
- const dataURL = canvas.toDataURL('image/jpeg', 1.0);
- if (!options.hasOwnProperty('border')) {
- source.src = dataURL;
- return;
- }
- const context = canvas.getContext('2d');
- const image = new Image();
- image.onload = function () {
- const size = options.width - 2 * options.border;
- context.fillStyle = "#FFF";
- context.fillRect(0, 0, canvas.width, canvas.height);
- context.drawImage(image, options.border, options.border, size, size);
- source.src = canvas.toDataURL('image/jpeg', 1.0);
- };
- image.src = dataURL;
- },
- makeQrcodes: function (sources) {
- for (let i = 0; i < sources.length; i++) {
- const options = this.initOptions(sources[i]);
- if (options.hasOwnProperty('text')) {
- const image = new Image();
- sources[i].parentNode.insertBefore(image, sources[i]);
- sources[i].style.display = 'none';
- this.makeQrcode(image, options);
- }
- }
- }
- };
- const mirages = {
- addQrcode: function (qrBox, makeQrcode, initOptions) {
- const image = qrBox.querySelector('img');
- if (!image.src.startWith(location.href)) {
- return;
- }
- const splitedSrc = image.src.split('?');
- let options = { text: splitedSrc[0] };
- if (splitedSrc[1]) {
- options = initOptions(new URLSearchParams(splitedSrc[1]), options);
- }
- makeQrcode(image, options);
- }
- };
- const position = document.querySelector('.post-qr-code-box');
- const qrs = document.getElementsByTagName('qr');
- if (position) {
- common.loadResources(() => {
- if (qrs.length !== 0) common.makeQrcodes(qrs);
- mirages.addQrcode(position, common.makeQrcode, common.initOptions);
- });
- } else if (qrs.length !== 0) {
- common.loadResources(() => common.makeQrcodes(qrs));
- }
- };
- </script>
如果你开启了 PJAX
,还需单独加入回调函数。对于本主题,依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD
,将 initQrcode();
添加进入即可。
添加二维码
以 html
形式将以下内容写入文章中,便可创建二维码。其中 text
是 编码内容
,为 必填
属性。后两者为可选属性,分别用于指定二维码和边框大小。
- !!!
- <qr text="https://logi.im" size="300" border="15"></qr>
- !!!
本文二维码
本主题作者为 PC 页面添加了文章二维码功能,你可在 控制台 - 外观 - 设置外观 - 二维码及打赏 - 本页二维码生成地址
中填入 {{%LINK}}?size=250&border=15
打开它,大小和边框可以自定义,效果见本文 PC 端。
最后送几个 OneDrive 5T 账号,回复后刷新可见,请每人只拿一个。更多博客内容,点击我查看。
此处内容需要评论回复后方可阅读
如有问题请在下方留言,文章转载请注明出处,详细交流请加下方群组!请大佬不要屏蔽文中广告,因为它将帮我分担服务器开支,如果能帮忙点击我将万分感谢。
强调几点:(该留言由系统自动生成!)
1. 请不要刷广告,本站没有流量!
2. 我不回复虚假邮箱,因为回复了你也看不到!
3. 存在必须回复的隐藏内容时,可以直接使用表情框里的阿鲁表情!