jQuery Save Image Onclick - javascript

On my website I have a jQuery script that, if the download button is clicked it will open the image that you want in new window.
My question is, how can I make this script when you click the button the image will save automatically and not open in a new window.
My code :
<script type="text/javascript">
$(document).ready(function (){
$('#download-btn').click(function(){
var size = $('#size').val();
window.open(size);
});
})
</script>

First I try jqueryfiledonwloader but not work on image file,after a some searching I found below solution,This work for me charmly,try this
<script type="text/javascript">
$(document).ready(function (){
$('#download-btn').click(function(){
var link = document.createElement('a');
link.href = '/sites/default/files/toy/jpeg/image-1419683919_4851.jpeg'; // use realtive url
link.download = 'MyToy.jpeg';
document.body.appendChild(link);
link.click();
});
})
</script>

<button class="btn btn-success" style="width: 250px;" data-image="/media/result/online_resultjpg_Page68.jpg" data-exam="GMO" data-roll="110211" onclick="downloadCertificate(this);" >Download Certificate</button>
<script type="text/javascript">
function downloadCertificate(obj){
var link = document.createElement('a');
const image = $(obj).data("image");
const img_ext = image.split(".");
const ext = img_ext[img_ext.length - 1];
link.href = image;
link.download = $(obj).data("exam") + "_" + $(obj).data("roll") + ext;
document.body.appendChild(link);
link.click();
}
</script>

Yuseferi script solution could be transformed into a simple anchor tag we put before the closing of the #download-btn one:
<a href='/sites/default/files/toy/jpeg/image-1419683919_4851.jpeg'
download='MyToy.jpeg'>MyToy.jpeg</a>
By the way, download is a standard HTML5 anchor tag (MDN) attribute and, in script, it is flagged "experimental": maybe because of unwanted side effect. Still Yuseferi solution should be full proof.

Related

How do I make a button that will download a file

I'm attempting to make a button that will download an image file upon pressing, but what I've made will only take me to the file itself.
Html:
<button onclick="file()">Click me, i'll download an image</button>
Javascript:
function file() {
const anchor = document.createElement("a");
anchor.href = "dingus.png";
anchor.download = "dingus.png";
document.body.appendChild(anchor);
anchor.click();
}
Here it is, don't forget to remove the appended element.
function download(url) {
const anchor = document.createElement('a')
anchor.href = url
anchor.download = url.split('/').pop()
document.body.appendChild(anchor)
anchor.click()
document.body.removeChild(anchor)
}
download path should be in HTTP path then only it will work. local that will not work
Example
function file() {
const anchor = document.createElement("a");
anchor.href = "http://www.exampleApiPath.com/dingus.png";
anchor.download = "http://www.exampleApiPath.com/dingus.png";
document.body.appendChild(anchor);
anchor.click(); }

Download an image via button in javascript/html?

I've read through lots of questions here and tried a few things but none are working. What I want is for an image to be downloaded at the click of a button, but instead the image is opened in another tab briefly before closing again. Ideally I want to make the download automatic, but right now I want it just to work.
<script type="text/javascript">
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.innerHTML == "Image") {
//someFunction(element.href);
var name = element.nameProp;
var address = element.href;
saveImageAs1(element.nameProp, element.href);
return false; // Prevent default action and stop event propagation
}
else
return true;
};
var link = document.createElement('a');
link.href = 'https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
function saveImageAs1(name, adress) {
if (confirm('CLICK')) {
window.win = open(adress);
setTimeout('win.document.execCommand("SaveAs")', 100);
setTimeout('win.close()', 500);
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<p>
Image
</p>
</div>
</form>
</body>
^This is code I got from a question mixed with someone's solution to that question, but the image doesn't download.
<html>
<header></header>
<body>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 1</a>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 2</a>
</body>
</html>
this version is based from a different answer, it downloads something but the downloads can't be opened or viewed.
For background info I'm coding in glitch, which is an online coding site kinda like repl, on a chromebook. is it possible the problems are due to what I'm using?
You can try putting the image URL in href and download attribute like this?
<a id="download_image_1" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 1</a>
<a id="download_image_2" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 2</a>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
But be aware while download is supported by modern browsers, Chrome is now ignoring the download attribute for cross-origin content.
https://developer.chrome.com/blog/chrome-65-deprecations/#block-cross-origin-a-download

Open Play Store on component load in Mobile Browser

I want to open Play Store on ngOnInit.
I have tried every combination but host name is added automatically.
myComponent.ts
var url1 = 'market.android.com/details?id=com.test&referrer=' + sponser;
window.open(url1, '_blank') //try1
$.get(url1, function () { /!*callback*!/
}); //try2
const link = document.createElement('a');
link.target = '_top';
link.href = url;
link.setAttribute('visibility', 'hidden');
link.click();//try3
But none of them are working. Thanks in advance.

How to download the screenshot automatically by using html2Canvas

I have a canvas which shows a graph and I'm trying to take a screenshot of the canvas using html2canvas() with the code below :
<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>
html2canvas($('#chart1'),{onrendered:function(canvas1)
{$('#displayCanvas').append(canvas1)}});
Here when the chart container is loaded the it uses the div with the id "displayCanvas" and appends the screenshot of the canvas.
How can I download the screenshot of the canvas which is displayed?
I have already tried using something like below to download the image:
var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();
but it only downloads the data on the canvas as an image without the background (it does not download the screenshot but only the data) which when opened after downloading shows a black screen with data in it. Can anyone help me on how to download the image directly of the screenshot taken from the html2Canvas()?
TRY THIS:
In the HTML:
Give the element that you want to screenshot, an ID of "capture".
Give the button/element that you would need to click to take the screenshot, an ID of "btn".
Load the html2canvas.min.js file.
In the Javascript:
Create the capture() function.
Bind the capture() function to whatever event you are using—in this case it's on the btn click event.
DONE! Watch the magic happen when you click on the btn.
HTML:
<h1 id="capture">Hellooooo</h1>
<button id="btn">Capture</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Javascript:
function capture() {
const captureElement = document.querySelector('#capture') // Select the element you want to capture. Select the <body> element to capture full page.
html2canvas(captureElement)
.then(canvas => {
canvas.style.display = 'none'
document.body.appendChild(canvas)
return canvas
})
.then(canvas => {
const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
const a = document.createElement('a')
a.setAttribute('download', 'my-image.png')
a.setAttribute('href', image)
a.click()
canvas.remove()
})
}
const btn = document.querySelector('#btn')
btn.addEventListener('click', capture)
Here's the JSFiddle
💡 QUICK TIP: If you want to capture the whole document/webpage, then just add the "capture" ID to the <body> tag.
If there is black background at image your chart must be visible on screen. Because html2canvas like a taking screenshot. If you want converting data
to canvas, you must be sure data is appear in screen.
In case someone is using React, here is some code you can copy:
async function download() {
const canvas = await html2canvas(document.querySelector("#screenshot"));
canvas.style.display = "none";
document.body.appendChild(canvas);
const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
const a = document.createElement("a");
a.setAttribute("download", `info.png`);
a.setAttribute("href", image);
a.click();
}
<a href="#" onClick={() => download()}>Download</a>
This worked for me:
HTML
<div id="canvasDiv">
<canvas id="canvas" height="100" width="100">
Your browser does not support the HTML canvas tag.
</canvas>
</div>
<button onclick="screenShot()" type="button">Take a screenshot</button>
Javascript
function screenShot(){
html2canvas(document.querySelector("#canvasDiv")).then(canvas => {
var dataURL = canvas.toDataURL( "image/png" );
var data = atob( dataURL.substring( "data:image/png;base64,".length ) ),
asArray = new Uint8Array(data.length);
for( var i = 0, len = data.length; i < len; ++i ) {
asArray[i] = data.charCodeAt(i);
}
var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );
saveAs(blob, "photo.png");
});
}
I just used the code provided in html2canvas site, then i used this code to download the screenshot.

how to make an auto download image in javascript by setTimeout?

<a id="download" href="link of your file">click here to download the file</a>.
<script>
var downloadTimeout = setTimeout (
function() {
window.location = document.getElementById('download').href;
}, 4000);
</script>
This is not what I want, I need the image will be automatically downloaded when
the time is stop by setTimeout but I can't get it. Please help me. Thank you
You can do it using HTML5. To download image, add download property to your link. Note that this doesn't work in some browsers. You can try it on JSFiddle.
Click here to download image
<canvas></canvas>
<script>
setTimeout(function(){
downloadCanvas();
}, 4E3);
function downloadImage(){
document.getElementById('download').click();
}
function downloadCanvas(){
var a = document.getElementById('download');
var b = a.href;
a.href = document.getElementsByTagName('canvas')[0].toDataURL();
downloadImage();
a.href = b;
}
</script>

Categories