I have trouble downloading an image when clicking on an image link.
I'm prepending download?image= before the image url, it is giving the save option but fails to get downloaded.
Here is my code:
Download
Note:Without using download?image= it is opening image in new tab.
My problem has been solved.I used File-saver.js library to download images.
Here is the code :
<a href='javascript:void(0)' onClick={()=>{this.download(data[0].compress_path)}} >Download</a>
And below is the download function which i have used:
download=(save)=>{
var FileSaver = require('file-saver');
var fileName=save.substring(save.lastIndexOf('/') + 1)
FileSaver.saveAs(save, fileName);
}
Note:Use
import { saveAs } from 'file-saver'to use saveAs.
Related
Following my previous question here,
I have a desktop application using Electron platform and Javascript where I am converting an HTML5 canvas to JPEG using:
<a id="download" download="Path.jpg">Download JPG</a>
then,
function download(){
var dt = canvas.toDataURL('image/jpeg');
this.href=dt;
}
document.getElementById('download').addEventListener('click', download, false);
This refreshes my whole application. How can I change this behavior, such that the page does not refresh when the download attribute is clicked?
I can think of this two snippets, one using blob and one using the download element. external-library: FileSave.js
// this one use FileSaver.js library
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
// or this way using download element.
// here you can encode your image-data and then send it.
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(imageData));
download.setAttribute('download', 'file.jpg');
also I found this one just now, electron specific solution :
Saving files locally with electron
Edit your anchor tag a bit
<a id="download" download="Path.jpg" target="_blank" onClick="download();">Download JPG</a>
And then your download function
function download(event){
event.currentTarget.href = canvas.toDataURL('image/jpeg');
}
This might help
I have jqplot and I want to download it once click a button as a jpg or png. I can do it using
$('#chartdiv').jqplotSaveImage();
(chartdiv is the div with plot)
It is working in chrome and firefox only. In IE it is not working.I tried in IE 11.
And I have another problem in chrome the downloaded image file name is 'download' and in firefox it is some wired name with .part extension (ex :- ka8ShgKH.part). Is there a way to put plot title as the download file name ?
thank you.
$("#btnSaveImg").on("click", LoadImage);
LoadImage = function(){
$('#chartdiv').jqplotSaveImage();
}
EDIT
jqplotsaveimage function
$.fn.jqplotSaveImage = function() {
var imgData = $(this).jqplotToImageStr({});
if (imgData) {
window.location.href = imgData.replace("image/png", "image/octet-stream");
}
};
I'm using jqPlot and I had issues using the above in IE and even if it worked in Chrome I could not name the downloaded image.
I found this case force download base64 image and the http://danml.com/download.html . That's working both in later versions of IE and Chrome and you can save the image with your own filename. The download.js can be used for more than just images.
//include the downoad.js file from http://danml.com/download.html
<button id="dwnl-chart-1" onClick="$.fn.jqplotSaveImage('chart-1', 'chart_name">Download as image</button>
$.fn.jqplotSaveImage = function(id, filename) {
var imgData = $('#'+id+'-parent').jqplotToImageStr({});
if (imgData) {
download(imgData, filename+'.png', "image/png");
}
};
I am working on a QR Code project and some image is generated via Canvas. So they are not actually images. And users can't download/save it by hitting a "save as" context menu item.
How do I let the users able to download it?
Assuming your "Save as" button look something like this (uninitialized, see below):
Save as
Then when you have created the QR code on canvas do the following to initialize it:
/// QR created here..
var link = document.getElementById('saveas');
link.download = 'filename.png'; /// set a filename or a default
link.href = canvas.toDataURL(); /// create a data-uri as link
The key here is the new download attribute for the anchor tag. This will pop up a save as requester instead of navigating to the image.
You can also chose to hide the link and show it when it's initialized. You get the idea..
var image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image); // or whereever you want.
edit: onload event handler is only required for server-loaded images.
// create save tag then
var data = canvas.toDataURL(); // default is png add param image/jpg if you want to
document.getElementById('save').href = data;
I'm currently using a File Picker to get a picture, using the example code from the Quickstart Tutorial: Accessing files with file pickers to select the picture.
This works fine, the problem comes when I try to use the selected image on screen, using an HTML img tag.
openPicker.pickSingleFileAsync().then(
function (file) {
if (file) {
var picture = document.getElementById("pictureId");
picture.src = new Windows.Foundation.Uri(file.path);
}
}
);
The picture's file.path is in the form of C:\Users\<user>\Pictures\example.jpg
I've tried using:
picture.src = file.path
picture.src = new Windows.Foundation.Uri(file.path)
I've also tried copying the path directly to the <img> tag to make sure it's not a screen refresh issue, but it still doesn't load.
The corresponding HTML, if relevant, is:
<div>
<img id="pictureId" class="pictureClass" src="" />
<button id="addPictureButton" class="">Add Picture</button>
</div>
What am I missing here?
Perhaps try one of the following
picture.src = URL.createObjectURL(file);
OR
picture.src = window.URL.createObjectURL(file);
References
createObjectURL method: http://msdn.microsoft.com/library/windows/apps/hh453196
How can I draw an image from the HTML5 File API on Canvas?
I'm using JavaScript for app I'm currently working on. I've created file picker as shown in guide.
After file is picked I get object Windows.Storage.StorageFile. This file is image, my question is how to display image in img tag for example?
Let's say you have an image tag in your page like:
<img id="theImage" />
then in your JavaScript callback from selecting the file, you'd set the img src property to a URL (using createObjectURL) that you create from the StorageFile reference:
var picker = Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".png"]);
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
// Launch the picker in open mode
picker.pickSingleFileAsync().then(function (file) {
var imgElement = document.getElementById("theImage");
imgElement.src = URL.createObjectURL(file);
});