downloading image in code format

Question

i m trying to make a button that downloads the image and what i did is, made a function like this:

function download_image(){
    $file = $_POST['file'];
    header('Content-Description: File Transfer');
    header("Content-type: application/octet-stream");//notice this content-type, it will force a download since browsers think that's what they should do with .exe files
    header("Content-disposition: attachment; filename= ".$file."");
    readfile($file);
}

and when download button is clicked i performed this js:

$.ajax({
        type:"POST",
        url:'..address to../download_image',
        data:{
            file:imgElem
        },
        success:function(){
            alert('image downloaded');
        }
    });

Now the problem is i don't have image name but is coded image like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBgAAAEtCAYAAACibtPQAAAgAElEQVR4nO3dX28c150mYH+c+S57s5d7uVcFGMEGuQiwgW+ycCEAsdl4gQjGJqsyYIyCYEbwEDXKZD1KNLHVtjMZDeM/kmmWLJmOrSiOzViOJDJiHNtnLoLqLRarm8VDFfsU63mBBzabzWZ12/rp1MtTzSdCCKEoipBlWciyLFRVFbpSVdX8PlmWhTzPO+8nIiIiIiIiItPLE7PZLJRlGUIIoSzLUBRF5x3rgkFEREREREREpJ0nmh8oGEREREREREQkJvOCIc/z+U6GrrQvkVh2XxERERERERGZVo61g6H+nN0MIiIiIiIiItLME+0b+hYHy94QUkRERERERESmlSfKsgyz2SyEEMJsNjvw2yHyPO/c0WAHg4iIiIiIiIg080QIi39NZbNgaL8HQ11KiIiIiIiIiIgcukRCREREREREROS4UTCIiIiI...PHWSgveiOXekFY/8Rr2ZBZ9hO1+vu2t8Mt+7r2Frr2X0JH3Z7n+aECob3Ntvn1zeNoP+/2cXY9FwWDSNqZwtzsWqDX861rV8NRBUP99V3zc9G8zfN8/vXtOdr1NUct1tvPXUTis2iXQAiH3xCwvTOrOQOan2+v15pf03WSuuj71DOjXYC014Lt+3Z97xC6d2097ufSTvuyjeZusaMe9yQFQ/Pxu55L83gf5/OVdKNgkDORRdvRRESkO6c1N+tLMeos2sorIiIi44+CQUadrsZZREQW57TnZv0TKDsCREREzn4UDCIiIiIiIiJy4igYREREREREROTEUTCIiIiIiIiIyImjYBARERERERGRE0fBICIiIiIiIiInjoJBRERERERERE4cBYOIiIiIiIiInDgKBhERERERERE5cRQMIiIiIiIiInLiKBhERERERERE5MRRMIiIiIiIiIjIiaNgEBEREREREZET5z8AyGKspBK3ENIAAAAASUVORK5CYII=">

so the problem is how should i download the image??? Please help:(

Vaibs_Cool · Answer 1 · 2013-10-04T07:33:11.127

2

Just set the window.location to the encoded URI, eg

window.location.href = 'data:image/png;base64,iVBORw0KGgo...

or you can also open a popup window

http://jsfiddle.net/vaibviad/VE8Qn

If you want to have file name and extension then you can also try this

<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>

Below link is demo with download attribute with filename and ext

http://jsfiddle.net/vaibviad/VE8Qn/3/

NOTE: Download attribute is not widely supported

edited Oct 04 '13 at 07:33

answered Oct 04 '13 at 06:55

Vaibs_Cool

6,126
5
28
61

i have a variable imgElem that consist the image information ie. `data:image/png:base64,... `and i did as u said but the variable imgElem returns [object Object]. the code is like `window.location.href='admin/reportManager/download_image?file='+imgElem;` – Robz Oct 04 '13 at 07:05
but there comes no image extention.is there any way to get extensions also – Robz Oct 04 '13 at 07:28
1

ya its an image but if it would have an ext than it would be easier for the end user to get more info – Robz Oct 04 '13 at 07:32
This answer is very interesting, but I do need to download the file with a meaningful name: is there anything I can add to the src to set the file name? Using the download attribute would be the best and simplest soultion, but it's too soon... – andreaconsole Jan 19 '14 at 10:29

score 1 · Answer 2 · answered Oct 04 '13 at 06:58

1

JavaScript cannot save a file, so in this situation you need to return a url from your API then in your success function you'll use the window.location = ....returned value... this will download the file.

If a DEMO is needed please let me know.

answered Oct 04 '13 at 06:58

abc123

17,855
7
52
82

downloading image in code format

2 Answers2