Browser/HTML Force download of image from src=data:image/jpeg;base64...
Simply replace image/jpeg
with application/octet-stream
. The client would not recognise the URL as an inline-able resource, and prompt a download dialog.
A simple JavaScript solution would be:
//var img = reference to image
var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element,
Another method is to use a blob:
URI:
var img = document.images[0];
img.onclick = function() {
// atob to base64_decode the data-URI
var image_data = atob(img.src.split(',')[1]);
// Use typed arrays to convert the binary data to a Blob
var arraybuffer = new ArrayBuffer(image_data.length);
var view = new Uint8Array(arraybuffer);
for (var i=0; i<image_data.length; i++) {
view[i] = image_data.charCodeAt(i) & 0xff;
}
try {
// This is the recommended method:
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
} catch (e) {
// The BlobBuilder API has been deprecated in favour of Blob, but older
// browsers don't know about the Blob constructor
// IE10 also supports BlobBuilder, but since the `Blob` constructor
// also works, there's no need to add `MSBlobBuilder`.
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
bb.append(arraybuffer);
var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob
}
// Use the URL object to create a temporary URL
var url = (window.webkitURL || window.URL).createObjectURL(blob);
location.href = url; // <-- Download!
};
Relevant documentation
atob
- Typed arrays
URL.createObjectURL
Blob
andBlobBuilder
How to use Base64 Encoded Image as img tag's source?
Yes you can use base64 images but make your the images are small and less in no.. below is a basic code where base64 images are called into html pages and rendered
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
check the fiddle http://jsfiddle.net/hpP45/
Javascript How to download image blob data:image/png;base64
added the download attr.
<a download="impeach.png" href="data:image/png;base64,iVBKCbAwQIECBAYAAB...">Download</a>
Download data URL file
Ideas:
Try a
<a href="data:...." target="_blank">
(Untested)Use downloadify instead of data URLs (would work for IE as well)
How to force an image to be downloaded?
Turns out one of the other questions did have the answer:
Browser/HTML Force download of image from src="data:image/jpeg;base64..."
I am doing it strictly on the client sde like so:
$('a#download_image').on('click', function() {
var url = $('#my_image').attr('src').replace(/^data:image\/[^;]/, 'data:application/octet-stream');
location.href = url;
});
Related Topics
Losing Scope When Using Ng-Include
How to Link a JavaScript File to a HTML File
How to Cancel Form Submission in Submit Button Onclick Event
Three.Js Ray Intersect Fails by Adding Div
Jsfiddle Code Not Working in My Own Page
Check With Jquery If Div Has Overflowing Elements
How to Submit a Form With JavaScript by Clicking a Link
How to Detect Keypresses in JavaScript
(Change) VS (Ngmodelchange) in Angular
How to Get the Values of Data Attributes in JavaScript Code
How to Do a Jquery Callback After Form Submit
How to Add an "Add to Favorites" Button or Link on My Website
Referenceerror: Event Is Not Defined Error in Firefox
Why Does Forms With Single Input Field Submit Upon Pressing Enter Key in Input
JavaScript Does Not Fire After Appending