Develop Reference

Download image in a URL

I have a QR in a URL
I want to click a button and download the image of the QR in the URL
URL: https://quickchart.io/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500¢erImageSizeRatio=0.4¢erImageUrl=https://app.tapo.app/Logo-Big.png
is it possible using PHP or Javascript?
I havent figured it out.

You can use fetch to get the content as a blob, then create an <a> element with the download attribute. Clicking on the anchor will download the image.
fetch('https://quickchart.io/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500%C2%A2erImageSizeRatio=0.4%C2%A2erImageUrl=https://app.tapo.app/Logo-Big.png').then(res => res.blob()).then(blob => {
let url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'Image.png';
a.click();
URL.revokeObjectURL(url);
});

Convert DOM element to blob

I am trying to convert a dom element to Blob, which I want to use later for sending the same as attachment(as pdf). The code for the same is as following:
Dom element:
<div id="dom-container">
Dom container
</div>
Code for dom to blob conversion: (in order to check the conversion, I am downloading as PDF)
const blobData = new Blob([document.getElementById('dom-container')], {type: "text/html"});
const a = document.createElement("a");
const object_URL = URL.createObjectURL(blobData);
a.href = object_URL;
a.download = 'file.pdf';
a.click();
URL.revokeObjectURL(object_URL);
After opening the file.pdf, getting the below error:
Can someone please help me to figure out where is the issue while this dom to blob/pdf conversion.
Thanks in advance.

How download base64 data as image?

I use vue-signature Library and I Don't know how to download base64 data generated as image,
Here is Link of library : https://www.npmjs.com/package/vue-signature
I've already read the documentation and see That "Save()" Methods Save image as PNG/JPG… but it give me base64 data,
thank you for your collaboration, I use vue js

This is not the most optimized solution, But it works.
var a = document.createElement("a"); //Create <a>
a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
In your case you can try this
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
source : https://vuejsexamples.com/vue-signature-pad-component/

JavaScript changing default file name?

How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?

Yes, you can change file name as per your own logic. and will be download in client browser as per following logic :
var blob = b64toBlob(b64Data, contentType, false);
var blobUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = 'none'
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
FileName can be set as per your own logic and append file extension
b64Data = your file's binary data, contentType = content type of your file.
for example for image it will be "data:image/png;base64,"

Electron - How to save base64 dataUrl to file

I'm working with an existing Electron project (convert web app to desktop app), which has a task that is to export content on screen to pdf/png/jpg.
Here is the situation:
The desktop app is purely client-side code, it doesn't connect to any API or server (just in case you suggest a solution using Nodejs server-side code)
I got the dataUrl from canvas object already (it's a base64 string of the file)
How can I save that dataUrl into a file (pdf/png/jpg)?
Here are some ways that I tried:
The good old window.location = dataUrl (nothing happens)
Create a form inside the div, action = dataUrl, then submit the form
Both ways are not working!
Thank you very much

For the download to occur the MIME type of the data URI needs to be changed to "application/octet-stream"
var dataURL = "data:text/plain,123";
var form = document.createElement("form");
form.action = dataURL.replace(/:[\w-/]+(?=,)/, ":application/octet-stream");
form.method = "GET";
document.body.appendChild(form);
form.submit();
Using <a> element with download attribute
var dataURL = "data:text/plain,123";
var a = document.createElement("a");
a.download = "file";
a.href = dataURL;
document.body.appendChild(a);
a.click();
See also How to download a file without using <a> element with download attribute or a server??