Embed QR PNGs as data URLs for file:// downloads
Chrome blocks fetch/canvas for sibling file:// images (CORS/tainted). Inline base64 in HTML so lightbox and .png chips download offline.
This commit is contained in:
@@ -718,16 +718,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% set _png = namespace(b64='', data='') %}
|
||||
{% if user.has_png | default(false) %}
|
||||
{% set _png.b64 = lookup('pipe', 'base64 < ' ~ ((hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.png') | quote)) | regex_replace('\\s+', '') %}
|
||||
{% set _png.data = 'data:image/png;base64,' ~ _png.b64 %}
|
||||
<div class="qr-block">
|
||||
<img
|
||||
src="{{ server.dir | e }}/{{ user.name | e }}.png"
|
||||
src="{{ _png.data }}"
|
||||
alt="QR {{ user.name | e }}"
|
||||
width="160"
|
||||
height="160"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-lightbox-src="{{ server.dir | e }}/{{ user.name | e }}.png"
|
||||
data-lightbox-src="{{ _png.data }}"
|
||||
data-lightbox-caption="{{ server.name | e }} · {{ user.name | e }}"
|
||||
data-lightbox-download="{{ server.name | e }}-{{ user.name | e }}.png"
|
||||
aria-label="Открыть QR-код {{ user.name | e }}"
|
||||
@@ -738,10 +741,10 @@
|
||||
<nav class="files" aria-label="Файлы">
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.url" download="{{ server.name | e }}-{{ user.name | e }}.url" data-filename="{{ server.name | e }}-{{ user.name | e }}.url" data-text="{{ (user.url ~ '\n') | e }}">.url</a>
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.txt" download="{{ server.name | e }}-{{ user.name | e }}.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.txt" data-text="{{ ('Server: ' ~ server.name ~ '\nDomain: ' ~ server.domain ~ ':' ~ server.port ~ '\nUser: ' ~ user.name ~ '\nPassword: ' ~ user.password ~ '\n\nURL:\n' ~ user.url ~ '\n') | e }}">.txt</a>
|
||||
{% if user.has_png | default(false) %}
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.png" download="{{ server.name | e }}-{{ user.name | e }}.png" data-filename="{{ server.name | e }}-{{ user.name | e }}.png">.png</a>
|
||||
{% if user.has_png | default(false) and _png.b64 %}
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.png" download="{{ server.name | e }}-{{ user.name | e }}.png" data-filename="{{ server.name | e }}-{{ user.name | e }}.png" data-png-b64="{{ _png.b64 }}">.png</a>
|
||||
{% endif %}
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ ('URL: ' ~ user.url ~ '\n') | e }}">.qr.txt</a>
|
||||
<a class="file-download" href="{{ server.dir | e }}/{{ user.name | e }}.qr.txt" download="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ server.name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ lookup('file', hysteria2_output_dir ~ '/' ~ server.dir ~ '/' ~ user.name ~ '.qr.txt', errors='ignore') | default('URL: ' ~ user.url ~ '\n', true) | e }}">.qr.txt</a>
|
||||
</nav>
|
||||
</article>
|
||||
{% endfor %}
|
||||
@@ -870,10 +873,16 @@
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var filename = downloadBtn.getAttribute('data-filename') || 'qr.png';
|
||||
if (downloadQrFromCanvas(filename)) return;
|
||||
|
||||
var src = downloadSrc || img.currentSrc || img.src;
|
||||
if (!src) return;
|
||||
|
||||
// Embedded data: URLs work on file:// (no CORS / tainted canvas)
|
||||
if (src && src.indexOf('data:') === 0) {
|
||||
triggerDataUrlDownload(src, filename);
|
||||
return;
|
||||
}
|
||||
if (downloadQrFromCanvas(filename)) return;
|
||||
if (!src || location.protocol === 'file:') return;
|
||||
|
||||
fetch(src)
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error('fetch failed');
|
||||
@@ -960,7 +969,13 @@
|
||||
function pngFromCard(link, filename) {
|
||||
var card = link.closest('.user-card');
|
||||
var qrImg = card && card.querySelector('img[data-lightbox-src], .qr-block img');
|
||||
if (!qrImg || !qrImg.complete || !qrImg.naturalWidth) return false;
|
||||
if (!qrImg) return false;
|
||||
var src = qrImg.currentSrc || qrImg.src || '';
|
||||
if (src.indexOf('data:image/') === 0) {
|
||||
triggerDataUrlDownload(src, filename);
|
||||
return true;
|
||||
}
|
||||
if (!qrImg.complete || !qrImg.naturalWidth) return false;
|
||||
try {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = qrImg.naturalWidth;
|
||||
@@ -980,15 +995,20 @@
|
||||
var filename = link.getAttribute('data-filename') || link.getAttribute('download') || 'download';
|
||||
var href = link.getAttribute('href');
|
||||
var fallbackText = link.getAttribute('data-text');
|
||||
var pngB64 = link.getAttribute('data-png-b64');
|
||||
var isPng = /\.png$/i.test(filename);
|
||||
|
||||
// Sync paths first — async fetch loses the user-gesture in Safari/Chrome
|
||||
// Sync paths first — file:// blocks fetch (CORS) and taints canvas
|
||||
if (pngB64) {
|
||||
triggerDataUrlDownload('data:image/png;base64,' + pngB64, filename);
|
||||
return;
|
||||
}
|
||||
if (isPng && pngFromCard(link, filename)) return;
|
||||
if (fallbackText !== null) {
|
||||
triggerFileDownload(new Blob([fallbackText], { type: 'text/plain;charset=utf-8' }), filename);
|
||||
return;
|
||||
}
|
||||
if (!href) return;
|
||||
if (!href || location.protocol === 'file:') return;
|
||||
|
||||
fetch(href)
|
||||
.then(function (res) {
|
||||
|
||||
@@ -424,16 +424,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% set _png = namespace(b64='', data='') %}
|
||||
{% if user.has_png | default(false) %}
|
||||
{% set _png.b64 = lookup('pipe', 'base64 < ' ~ ((hysteria2_output_dir ~ '/' ~ hysteria2_output_name ~ '/' ~ user.name ~ '.png') | quote)) | regex_replace('\\s+', '') %}
|
||||
{% set _png.data = 'data:image/png;base64,' ~ _png.b64 %}
|
||||
<div class="qr-block">
|
||||
<img
|
||||
src="{{ user.name | e }}.png"
|
||||
src="{{ _png.data }}"
|
||||
alt="QR {{ user.name | e }}"
|
||||
width="160"
|
||||
height="160"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-lightbox-src="{{ user.name | e }}.png"
|
||||
data-lightbox-src="{{ _png.data }}"
|
||||
data-lightbox-caption="{{ hysteria2_output_name | e }} · {{ user.name | e }}"
|
||||
data-lightbox-download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png"
|
||||
aria-label="Открыть QR-код {{ user.name | e }}"
|
||||
@@ -444,10 +447,10 @@
|
||||
<nav class="files" aria-label="Файлы">
|
||||
<a class="file-download" href="{{ user.name | e }}.url" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.url" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.url" data-text="{{ (user.url ~ '\n') | e }}">.url</a>
|
||||
<a class="file-download" href="{{ user.name | e }}.txt" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.txt" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.txt" data-text="{{ ('Server: ' ~ hysteria2_output_name ~ '\nDomain: ' ~ hysteria2_domain ~ ':' ~ hysteria2_listen_port ~ '\nUser: ' ~ user.name ~ '\nPassword: ' ~ user.password ~ '\n\nURL:\n' ~ user.url ~ '\n') | e }}">.txt</a>
|
||||
{% if user.has_png | default(false) %}
|
||||
<a class="file-download" href="{{ user.name | e }}.png" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png">.png</a>
|
||||
{% if user.has_png | default(false) and _png.b64 %}
|
||||
<a class="file-download" href="{{ user.name | e }}.png" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.png" data-png-b64="{{ _png.b64 }}">.png</a>
|
||||
{% endif %}
|
||||
<a class="file-download" href="{{ user.name | e }}.qr.txt" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ ('URL: ' ~ user.url ~ '\n') | e }}">.qr.txt</a>
|
||||
<a class="file-download" href="{{ user.name | e }}.qr.txt" download="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-filename="{{ hysteria2_output_name | e }}-{{ user.name | e }}.qr.txt" data-text="{{ lookup('file', hysteria2_output_dir ~ '/' ~ hysteria2_output_name ~ '/' ~ user.name ~ '.qr.txt', errors='ignore') | default('URL: ' ~ user.url ~ '\n', true) | e }}">.qr.txt</a>
|
||||
</nav>
|
||||
</article>
|
||||
{% endfor %}
|
||||
@@ -547,10 +550,16 @@
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var filename = downloadBtn.getAttribute('data-filename') || 'qr.png';
|
||||
if (downloadQrFromCanvas(filename)) return;
|
||||
|
||||
var src = downloadSrc || img.currentSrc || img.src;
|
||||
if (!src) return;
|
||||
|
||||
// Embedded data: URLs work on file:// (no CORS / tainted canvas)
|
||||
if (src && src.indexOf('data:') === 0) {
|
||||
triggerDataUrlDownload(src, filename);
|
||||
return;
|
||||
}
|
||||
if (downloadQrFromCanvas(filename)) return;
|
||||
if (!src || location.protocol === 'file:') return;
|
||||
|
||||
fetch(src)
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error('fetch failed');
|
||||
@@ -637,7 +646,13 @@
|
||||
function pngFromCard(link, filename) {
|
||||
var card = link.closest('.user-card');
|
||||
var qrImg = card && card.querySelector('img[data-lightbox-src], .qr-block img');
|
||||
if (!qrImg || !qrImg.complete || !qrImg.naturalWidth) return false;
|
||||
if (!qrImg) return false;
|
||||
var src = qrImg.currentSrc || qrImg.src || '';
|
||||
if (src.indexOf('data:image/') === 0) {
|
||||
triggerDataUrlDownload(src, filename);
|
||||
return true;
|
||||
}
|
||||
if (!qrImg.complete || !qrImg.naturalWidth) return false;
|
||||
try {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = qrImg.naturalWidth;
|
||||
@@ -657,15 +672,20 @@
|
||||
var filename = link.getAttribute('data-filename') || link.getAttribute('download') || 'download';
|
||||
var href = link.getAttribute('href');
|
||||
var fallbackText = link.getAttribute('data-text');
|
||||
var pngB64 = link.getAttribute('data-png-b64');
|
||||
var isPng = /\.png$/i.test(filename);
|
||||
|
||||
// Sync paths first — async fetch loses the user-gesture in Safari/Chrome
|
||||
// Sync paths first — file:// blocks fetch (CORS) and taints canvas
|
||||
if (pngB64) {
|
||||
triggerDataUrlDownload('data:image/png;base64,' + pngB64, filename);
|
||||
return;
|
||||
}
|
||||
if (isPng && pngFromCard(link, filename)) return;
|
||||
if (fallbackText !== null) {
|
||||
triggerFileDownload(new Blob([fallbackText], { type: 'text/plain;charset=utf-8' }), filename);
|
||||
return;
|
||||
}
|
||||
if (!href) return;
|
||||
if (!href || location.protocol === 'file:') return;
|
||||
|
||||
fetch(href)
|
||||
.then(function (res) {
|
||||
|
||||
Reference in New Issue
Block a user