javascript - 我如何从javascript中的url生成二维码
问题描述
所以我构建了一个 url shortner,它从 python 获取 url 并生成一个 QR 码以及 shortUrl,我使用 jinja2template 作为 UI,因为我对 JavaScript 非常陌生,下面的代码主要是从 Youtube 和 Internet 复制的。
这个类将显示转换后的 shortUrl,并且旁边会有一个复制链接按钮
<div class = "result__container">
<div class = "shorturl">
<div id="qrcode"></div>
</div>
<div>
<button onclick = "copyLink()">Copy Link</button>
</div>
</div>
这是创建二维码的逻辑我在这里使用 qrcode.min.js 来创建二维码
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
<script>
const qrcode = new QRCode(document.getElementById('qrcode'), {
text: response.shortUrl,
width: 128,
height: 128,
colorDark : '#000',
colorLight : '#fff',
correctLevel : QRCode.CorrectLevel.H
});
xhr.onload = function () {
const response = JSON.parse(this.responseText);
console.log(this.status);
console.log(response);
if(this.status ==200){
resultContainer.style.display = "flex";
shortUrl.innerHTML = `SHORT URL :- <a href=${response.shortUrl}>${response.shortUrl}</a>`
}
else{
alert(`An error occurred, ${response.detail}`)
}
};
解决方案
David Shim 的这个简单的库让它变得简单!
const qrcode = new QRCode(document.getElementById('qrcode'), {
text: 'http://jindo.dev.naver.com/collie',
width: 128,
height: 128,
colorDark : '#000',
colorLight : '#fff',
correctLevel : QRCode.CorrectLevel.H
});
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
<div id="qrcode"></div>
你也可以对你的造型和动作非常感兴趣。这是我使用相同的基础代码构建的示例。在为 QR 码和文档设置样式后,我在悬停时添加了三个操作按钮,它们将相应地下载、复制或访问 QR/源。不幸的是,由于权限问题,这些按钮在 iframe 中不起作用,因此它们在 StackOverflow 代码段或 CodePen、JSFiddle、CodeSandbox 等中不起作用。但是,您可以将此代码加载到您自己的服务器中以查看它是否正常工作完美。
这是成品:
const qrElement = document.getElementById('qrcode');
const qrUrl = 'https://davidshimjs.github.io/qrcodejs/';
const qrcode = new QRCode(document.getElementById('qrcode'), {
text: qrUrl,
width: 128,
height: 128,
colorDark : '#000',
colorLight : '#fff',
correctLevel : QRCode.CorrectLevel.H
});
const qrActionButtons = Array.from(qrElement.querySelectorAll('.qr-action'));
qrActionButtons.find(b => b.dataset.qrAction === 'visit').href = qrUrl;
document.addEventListener('click', e => {
if (e.target) {
if (qrActionButtons.indexOf(e.target) !== -1) {
const button = e.target;
const action = button.dataset.qrAction;
if (action === 'download') {
const a = document.createElement('a');
a.download = 'QR-Code.png';
a.href = qrElement.querySelector('img').src;
console.log(a.href);
a.click();
a.remove();
} else if (action === 'copy') {
fetch(qrElement.querySelector('img').src).then(res => res.blob()).then(blob => navigator.clipboard.write([new ClipboardItem({[blob.type]:blob})]));
} else if (action === 'visit') {
// handled organically
}
}
}
});
:root {
--theme-color: #ff0;
--trace-size: 6%;
--trace-distance: 5%;
}
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background-color: var(--theme-color);
}
#qrcode {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
#qrcode {
background-color: inherit;
transition: all 0.15s ease-out;
}
#qrcode::before {
content: '';
display: block;
width: var(--trace-size);
height: var(--trace-size);
position: absolute;
background-color: #f00;
border-radius: 20%;
animation: 2s ease-in-out 1s infinite normal both qr-trace;
transition: inherit;
}
#qrcode img {
background-color: inherit;
mix-blend-mode: darken;
image-rendering: pixelated;
transition: inherit;
}
#qrcode .qr-action {
display: block;
width: 33%;
height: 33%;
position: absolute;
left: 50%;
top: 50%;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
border-radius: 50%;
font-size: 20px;
z-index: 1;
transition: inherit;
cursor: pointer;
text-decoration: none !important;
transform-style: preserve-3d;
box-sizing: border-box;
}
#qrcode .qr-action::before,
#qrcode .qr-action::after {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 10px 20px -10px #000;
transform-style: preserve-3d;
transition: all .45s ease-out;
}
#qrcode .qr-action::before {
backface-visibility: hidden;
transform: translateZ(0px) scale(1);
background-color: #fff;
color: #000;
}
#qrcode .qr-action::after {
transform: translateZ(-1px) scale(0.95);
background-color: #000;
color: var(--theme-color);
}
#qrcode .qr-action[data-qr-action="download"]::before,
#qrcode .qr-action[data-qr-action="download"]::after {
content: '\f381';
}
#qrcode .qr-action[data-qr-action="copy"]::before,
#qrcode .qr-action[data-qr-action="copy"]::after {
content: '\f0c5';
}
#qrcode .qr-action[data-qr-action="visit"]::before,
#qrcode .qr-action[data-qr-action="visit"]::after {
content: '\f0c1';
}
#qrcode .qr-action:nth-child(1) {
transform: translate(-175%, -50%) scale(0);
}
#qrcode .qr-action:nth-child(2) {
transform: translate(-50%, -50%) scale(0);
}
#qrcode .qr-action:nth-child(3) {
transform: translate(75%, -50%) scale(0);
}
#qrcode .qr-action i,
#qrcode .qr-action svg {
pointer-events: none;
}
#qrcode:hover::before {
opacity: 0;
}
#qrcode:hover img {
opacity: 0.5;
}
#qrcode:hover .qr-action {
opacity: 1;
}
#qrcode:hover .qr-action:nth-child(1) {
transform: translate(-175%, -50%) scale(1);
}
#qrcode:hover .qr-action:nth-child(2) {
transform: translate(-50%, -50%) scale(1);
}
#qrcode:hover .qr-action:nth-child(3) {
transform: translate(75%, -50%) scale(1);
}
#qrcode:hover .qr-action:hover::before {
transform: translateZ(0px) scale(0.95) rotateY(180deg);
}
#qrcode:hover .qr-action:hover::after {
transform: translateZ(-1px) scale(1) rotateY(180deg);
}
@keyframes qr-trace {
0%, 10% {
left: calc(-1 * (var(--trace-size) + var(--trace-distance)));
top: calc(-1 * (var(--trace-size) + var(--trace-distance)));
filter: hue-rotate(0deg);
} 25%, 35% {
left: calc(100% + var(--trace-distance));
top: calc(-1 * (var(--trace-size) + var(--trace-distance)));
} 50%, 60% {
left: calc(100% + var(--trace-distance));
top: calc(100% + var(--trace-distance));
} 75%, 85% {
left: calc(-1 * (var(--trace-size) + var(--trace-distance)));
top: calc(100% + var(--trace-distance));
} 100% {
left: calc(-1 * (var(--trace-size) + var(--trace-distance)));
top: calc(-1 * (var(--trace-size) + var(--trace-distance)));
filter: hue-rotate(360deg);
}
}
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
<script src="https://kit.fontawesome.com/07afc061fe.js" crossorigin="anonymous"></script>
<div id="qrcode"><button class="qr-action" data-qr-action="download"></button><button class="qr-action" data-qr-action="copy"></button><a class="qr-action" data-qr-action="visit" target="_blank" title="Visit QR Source"></a></div>
推荐阅读
- flutter - 如何防止Overlay覆盖AppBar?
- react-native - 如何在不通过过渡屏幕的情况下导航到特定屏幕。反应导航
- angular - Angular:如何在代码的**不同位置**同步两个观察者
- python - pocketsphinx-keyword_entries:为什么有这么多重复的单词
- python - 为什么用 current.next 进行迭代对链表有效
- swiftui - Swift - JSONDecoder & Combine 框架问题
- javascript - 使用 Django 在 html 页面上映射我的 geojson 数据时遇到问题
- cytoscape - 为什么 Cytoscape 应用程序“iRegulon”不能完成分析?
- node.js - 在新选项卡中打开时,从 URL.createObjectURL() 生成的图像 Blob URL 已损坏
- android - React-Native:Firebase Google 登录在 react-native android 应用发布版本中不起作用