initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
437
legacy/pages-html/slvl/all/bet-qr
Normal file
437
legacy/pages-html/slvl/all/bet-qr
Normal file
@@ -0,0 +1,437 @@
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
<div class="card noprint" id="secondary-card">
|
||||
<div class="card-header ui-sortable-handle" style="cursor: move;display: none;">
|
||||
<h3 class="card-title" style=""></h3>
|
||||
<div class="card-tools">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
|
||||
<div class="row card-body">
|
||||
<div class="col-12"></div><br><br>
|
||||
<div class="col-12 mx-auto d-block text-center justify-content-center noprint" id="qrcode"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card noprint" id="secondary-card-betting">
|
||||
<div class="card-header ui-sortable-handle" style="cursor: move;display: none;">
|
||||
<h3 class="card-title" style=""></h3>
|
||||
<div class="card-tools">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row card-body noprint">
|
||||
<div class="col mx-auto noprint" style="display:none;" id="">
|
||||
<button class="btn btn-primary btn-block" onclick="DownloadQRCodeNow()">SAVE</button>
|
||||
|
||||
</div>
|
||||
<div class="col mx-auto noprint" id="">
|
||||
<button class="btn btn-warning btn-block" onclick="printbtqr()">PRINT</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row card-body" style="display:none;">
|
||||
<div class="col mx-auto" id="">
|
||||
Date:
|
||||
</div>
|
||||
<div class="col mx-auto" id="">
|
||||
<select id="sched" class="form-control"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<div id="qrcodeprinting" class="mainprint hideonbrowser"></div>
|
||||
</center>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function printbtqr(){
|
||||
window.print();
|
||||
|
||||
//printJS({ printable: "mainqrimg", type: "html",});
|
||||
|
||||
}
|
||||
|
||||
function OLDsavebtqr(){
|
||||
let b64 = $('.mainbtqr').attr('src');
|
||||
let base64Data = b64.split(',')[1];
|
||||
let decodedData = atob(base64Data);
|
||||
|
||||
let uint8Array = new Uint8Array(decodedData.length);
|
||||
for (let i = 0; i < decodedData.length; i++) {
|
||||
uint8Array[i] = decodedData.charCodeAt(i);
|
||||
}
|
||||
|
||||
const blob = new Blob([uint8Array], { type: "image/png" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "NewQ.png";
|
||||
link.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
}
|
||||
|
||||
function OLD2savebtqr() {
|
||||
let b64 = $('.mainbtqr').attr('src');
|
||||
let base64Data = b64.split(',')[1];
|
||||
let decodedData = atob(base64Data);
|
||||
|
||||
let uint8Array = new Uint8Array(decodedData.length);
|
||||
for (let i = 0; i < decodedData.length; i++) {
|
||||
uint8Array[i] = decodedData.charCodeAt(i);
|
||||
}
|
||||
|
||||
const blob = new Blob([uint8Array], { type: "image/png" });
|
||||
|
||||
// Check if the browser is Internet Explorer (MS Edge)
|
||||
if (navigator.msSaveOrOpenBlob) {
|
||||
navigator.msSaveOrOpenBlob(blob, 'NewQ.png');
|
||||
} else {
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "NewQ.png";
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
function savebtqr() {
|
||||
let b64 = $('.mainbtqr').attr('src');
|
||||
let base64Data = b64.split(',')[1];
|
||||
let decodedData = atob(base64Data);
|
||||
|
||||
let uint8Array = new
|
||||
|
||||
Uint8Array(decodedData.length);
|
||||
for (let i = 0; i < decodedData.length; i++) {
|
||||
uint8Array[i] = decodedData.charCodeAt(i);
|
||||
}
|
||||
|
||||
const blob = new Blob([uint8Array], { type: "image/png" });
|
||||
|
||||
// Cross-browser download approach:
|
||||
try {
|
||||
// Attempt saving via browser's native download manager:
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "NewQRCode.png";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
// Fallback for mobile browsers with limitations:
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const base64Url = event.target.result;
|
||||
const img = document.createElement("img");
|
||||
img.src = base64Url;
|
||||
// Use a mobile-friendly method to display or share the image
|
||||
// (e.g., open a new window/tab, trigger native share functionality)
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
}
|
||||
}
|
||||
|
||||
function oldsaveQrCode() {
|
||||
// Get the base64 data
|
||||
let b64 = document.getElementById('mainqrimg').src;
|
||||
let base64Data = b64.split(',')[1];
|
||||
|
||||
// Create a Blob from base64 data
|
||||
const blob = new Blob([base64Data], { type: "image/png" });
|
||||
|
||||
// Create a link element
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "QrCode.png";
|
||||
|
||||
// Append the link to the body
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger a click on the link
|
||||
link.click();
|
||||
|
||||
// Remove the link from the body
|
||||
document.body.removeChild(link);
|
||||
|
||||
// Revoke the object URL
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
|
||||
function saveQrCode2() {
|
||||
// Get the base64 data
|
||||
let b64 = document.getElementById('mainqrimg').src;
|
||||
|
||||
// Create a canvas element
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
// Create an image element
|
||||
const image = new Image();
|
||||
image.onload = function () {
|
||||
// Set canvas dimensions based on image dimensions
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
|
||||
// Draw the image onto the canvas
|
||||
context.drawImage(image, 0, 0);
|
||||
|
||||
// Convert canvas content to a data URL
|
||||
const dataUrl = canvas.toDataURL("image/png");
|
||||
|
||||
// Create a Blob from the data URL
|
||||
const blob = dataURLToBlob(dataUrl);
|
||||
|
||||
// Create a link element
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "QrCode.png";
|
||||
|
||||
// Append the link to the body
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger a click on the link
|
||||
link.click();
|
||||
|
||||
// Remove the link from the body
|
||||
document.body.removeChild(link);
|
||||
|
||||
// Revoke the object URL
|
||||
URL.revokeObjectURL(link.href);
|
||||
};
|
||||
|
||||
// Set the image source
|
||||
image.src = b64;
|
||||
}
|
||||
|
||||
|
||||
function oldsaveQrCode() {
|
||||
// Get the base64 data
|
||||
let b64 = document.getElementById('mainqrimg').src;
|
||||
let base64Data = b64.split(',')[1];
|
||||
|
||||
// Create a Blob from base64 data
|
||||
const blob = new Blob([base64Data], { type: "image/png" });
|
||||
|
||||
// Create a link element
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "QrCode.png";
|
||||
|
||||
// Append the link to the body
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger a click on the link
|
||||
link.click();
|
||||
|
||||
// Remove the link from the body
|
||||
document.body.removeChild(link);
|
||||
|
||||
// Revoke the object URL
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
function saveQrCode3() {
|
||||
// Get the base64 data
|
||||
let b64 = document.getElementById('mainqrimg').src;
|
||||
const base64Content = b64.split(',')[1];
|
||||
const binaryContent = atob(base64Content);
|
||||
|
||||
const uint8Array = new Uint8Array(binaryContent.length);
|
||||
for (let i = 0; i < binaryContent.length; i++) {
|
||||
uint8Array[i] = binaryContent.charCodeAt(i);
|
||||
}
|
||||
|
||||
// Create a Blob
|
||||
const blob = new Blob([uint8Array], { type: 'image/png' });
|
||||
|
||||
// Create a download link
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'QrCode.png';
|
||||
|
||||
// Append the link to the body
|
||||
document.body.appendChild(link);
|
||||
|
||||
// Trigger a click on the link
|
||||
link.click();
|
||||
|
||||
// Remove the link from the body
|
||||
document.body.removeChild(link);
|
||||
|
||||
// Revoke the object URL
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
|
||||
function saveQrCode() {
|
||||
// Get the base64 data
|
||||
let b64 = document.getElementById('mainqrimg').src;
|
||||
let base64Data = b64.split(',')[1];
|
||||
|
||||
// Convert base64 to a Blob
|
||||
const byteCharacters = atob(base64Data);
|
||||
const byteNumbers = new Array(byteCharacters.length);
|
||||
for (let i = 0; i < byteCharacters.length; i++) {
|
||||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||
}
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
const blob = new Blob([byteArray], { type: 'image/png' });
|
||||
|
||||
// Use FileSaver.js to trigger the download
|
||||
saveAs(blob, 'QrCode.png');
|
||||
}
|
||||
|
||||
// Function to convert data URL to Blob
|
||||
function dataURLToBlob(dataUrl) {
|
||||
const parts = dataUrl.split(';base64,');
|
||||
const contentType = parts[0].split(':')[1];
|
||||
const raw = window.atob(parts[1]);
|
||||
const rawLength = raw.length;
|
||||
const uint8Array = new Uint8Array(new ArrayBuffer(rawLength));
|
||||
|
||||
for (let i = 0; i < rawLength; ++i) {
|
||||
uint8Array[i] = raw.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([uint8Array], { type: contentType });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
new QRCode(document.getElementById("qrcode"), "TAYTRSRC="+currenttarget,);
|
||||
|
||||
|
||||
new QRCode("qrcodeprinting", {
|
||||
text: "TAYTRSRC="+currenttarget,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
colorDark : "#000000",
|
||||
colorLight : "#ffffff",
|
||||
correctLevel : QRCode.CorrectLevel.H
|
||||
});
|
||||
|
||||
// new QRCode(document.getElementById("qrcode"), "TAYTRSRC="+currenttarget);
|
||||
$("#qrcode").find("img").addClass("img-fluid mx-auto d-block noprint");
|
||||
|
||||
$("#qrcode").find("img").addClass("mainbtqr");
|
||||
// $("#qrcode").find("img").prepend('<br>');
|
||||
//$("#qrcode").find('canvas').attr('width')=screen.width-40+'px';
|
||||
//$("#qrcode").find("img").attr("id", "mainqrimg");
|
||||
|
||||
$("#mainqrimg").attr("width", screen.width-40+'px');
|
||||
$("#qrcodeprinting").find("img").addClass("mainprint");
|
||||
$("#qrcodeprinting").find("img").attr("id", "mainqrimg");
|
||||
// $("#qrcodeprinting").find("img").hide();
|
||||
|
||||
|
||||
console.log("QR Download Button:", $("#qrdownloadbutton").length);
|
||||
console.log("Main QR Image:", $("#mainqrimg").attr("src"));
|
||||
$("#qrdownloadbutton").attr("href", $("#mainqrimg").attr("src"));
|
||||
|
||||
|
||||
$("#mainqrimg").on("load", function() {
|
||||
|
||||
//$("#qrdownloadbutton").attr("href", $("#mainqrimg").attr("src"));
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#qrdownloadbutton").on("click", function() {
|
||||
downloadQRCode();
|
||||
});
|
||||
|
||||
function downloadQRCode() {
|
||||
const base64Data = $("#mainqrimg").attr("src").split(",")[1];
|
||||
const decodedData = atob(base64Data);
|
||||
const uint8Array = new Uint8Array(decodedData.length);
|
||||
|
||||
for (let i = 0; i < decodedData.length; i++) {
|
||||
uint8Array[i] = decodedData.charCodeAt(i);
|
||||
}
|
||||
|
||||
const blob = new Blob([uint8Array], { type: "image/png" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "NewQr.png";
|
||||
link.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
|
||||
$('#qrcode').find('canvas').attr('id', 'qrcode-canvas');
|
||||
$('#qrcode').find('img').attr('id', 'qrcode-image');
|
||||
|
||||
});
|
||||
|
||||
function DownloadQRCodeNow(){
|
||||
let img = document.getElementById('qrcode-image');
|
||||
let canvas = document.getElementById('qrcode-canvas');
|
||||
canvas.width = img.clientWidth;
|
||||
canvas.height = img.clientHeight;
|
||||
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.drawImage(img,0,0)
|
||||
|
||||
canvas.toBlob(function(blob){
|
||||
let link = document.createElement('a');
|
||||
link.download = 'qrcode.png';
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.click();
|
||||
|
||||
URL.revokeObjectURL(link.href);
|
||||
|
||||
},'image/png');
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.hideonbrowser {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user