Force Download an Image from Src Using JavaScript

Force download an image from src using Javascript

You have a few problems there in your code.

First, you are appending the wrong element to img_wrap element. You should be appending the anchor element instead of the downloadable_tag.

Then, .click() should be used on dom objects, not on Jquery objects. So I think you should fix that line too.

Finally, the download attribute will show the download window only for files which are in the same domain. It doesn't work for cross origin requests for security purposes.

So with all the mentioned fixes, this is how your code should be:

<div class="image_wrap">
    <img height="100px" width="200px" src="01_eduma.__large_preview.__large_preview.jpg" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    var img_wrap = $('.image_wrap'),
        src = img_wrap.find('img').attr('src'),
        anchor = $('<a href="' + src + '" download>hello</a>'),
        downloadable_tag = img_wrap.append(anchor);

    anchor[0].click()

Notice that I have used a local path for the image. Here's a plunker demo.

http://plnkr.co/edit/eK1yJTYPUzF5p4DVTRem?p=preview

Hope it helps :) Feel free to ask if you have any doubts!

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 and BlobBuilder

Force an img to re-download from the same URL

Try adding a query parameter like a timestamp. As the timestamp will be different each time it will be considered a new request and you will get a new image each time to update the img src

this.gifLoader = "http://loremflickr.com/" + window.screen.width + "/" + window.screen.height +"?timestamp=" + new Date().getTime();

Hope this helps :)

---

Related Topics