Comments (1)
Hi, Can you add the function to save the generated QR as PDF or Jpeg
@hubono JPG and PDF
<button id="saveJpgBtn" class="btn btn-primary">Save as JPG</button>
<button id="savePdfBtn" class="btn btn-secondary">Save as PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script>
function saveQRCode(format) {
const svgElement = document.querySelector('svg');
if (!svgElement) {
console.error('SVG Element is not defined');
return;
}
const canvas = document.createElement('canvas');
canvas.width = svgElement.clientWidth;
canvas.height = svgElement.clientHeight;
const ctx = canvas.getContext('2d');
const img = new Image();
const svgBlob = new Blob([new XMLSerializer().serializeToString(svgElement)], {type: 'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(svgBlob);
img.onload = function() {
ctx.drawImage(img, 0, 0);
URL.revokeObjectURL(url); // Clean up the URL object
if (format === 'JPG') {
// Process and save as JPG
const jpegUrl = canvas.toDataURL('image/jpeg');
const downloadLink = document.createElement('a');
downloadLink.href = jpegUrl;
downloadLink.download = 'qrcode.jpg';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
} else if (format === 'PDF') {
// Process and save as PDF using jsPDF
const pdf = new jspdf.jsPDF({
orientation: 'p',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, canvas.width, canvas.height);
pdf.save('qrcode.pdf');
}
};
img.src = url;
}
document.getElementById('saveJpgBtn').addEventListener('click', () => saveQRCode('JPG'));
document.getElementById('savePdfBtn').addEventListener('click', () => saveQRCode('PDF'));
</script>
This code does the following:
- Provides two buttons for the user to choose whether to save the SVG as a JPG or a PDF.
- Defines a single saveQRCode function that accepts a format ('JPG' or 'PDF') and converts the SVG element accordingly.
- For JPG, it creates a temporary link and triggers a download of the image.
- For PDF, it uses jsPDF to create a PDF document, adds the canvas content as an image, and then saves the document.
- Attaches event listeners to both buttons to call saveQRCode with the appropriate format when clicked.
Make sure the SVG element you want to convert is correctly selected by document.querySelector('svg'), and adjust as necessary for your specific use case.
from qrcode-svg.
Related Issues (20)
- Use of template for the QR eyes + insert an image in center
- Webpack Module not found: Error: Can't resolve 'fs' in 'node_modules/qrcode-svg/lib' HOT 4
- Support Micro QR Code
- Support Numeric and Alphanumeric encoding modes HOT 2
- Please add an option for `shape-rendering` property.
- Add ES6 module
- libs for reading SVG qrs
- numeric encoding
- support generating svg path only
- How to custom image into middle of generated QR code? HOT 3
- length overflow for emojis?
- What's with the obfuscated code? HOT 2
- How to make the s SVG full width?
- Scanner/website not working
- Can't resolve 'fs' HOT 9
- Feature request: add viewBox property HOT 2
- The output svg code can be more concise HOT 2
- transparent background or opacity as an option? HOT 2
- Incompatible with secure CSP HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qrcode-svg.