5

I'm trying to find a trick to save a picture coded in Data-URI like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1MAAAE7CAYAAAA4gNuCAAAgAElEQ…
i/fPjJwSa8k8blB7TPIbffod14w9E/Baq03hUCXPf2/wK6K8SbNo44VwAAAABJRU5ErkJggg==

Another question: Where the picture is saved in the first time in the server? Browser?

demongolem
  • 9,474
  • 36
  • 90
  • 105
karim karim
  • 81
  • 1
  • 1
  • 11

1 Answers1

4

JS: save image to user's disk using javascript, 

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
        <script type="text/javascript">
            window.onload = function () {
                var img = document.getElementById('embedImage');
                var button = document.getElementById('saveImage');
                img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
                'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
                '9TXL0Y4OHwAAAABJRU5ErkJggg==';
                img.onload = function () {
                    button.removeAttribute('disabled');
                };
                button.onclick = function () {
                    window.location.href = img.src.replace('image/png', 'image/octet-stream');
                };
            };
        </script>
    </head>
    <body>
        <img id="embedImage" alt="Red dot"/>
        <input id="saveImage" type="button" value="save image" disabled="disabled"/>
    </body>
</html>

PHP: http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image-to-png.html

<?php
    // requires php5
    define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
?>

EDIT JS solution 2 (fiddle: http://jsfiddle.net/KAdN8/):

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
        <script type="text/javascript">
            var img = document.getElementById('embedImage');
            if( document.createEvent ) {
              var evObj = document.createEvent('MouseEvents');
              evObj.initEvent( 'click', true, false );
              img.dispatchEvent(evObj);
            } else if( document.createEventObject ) {
              img.fireEvent('on'+evt);
            }
        </script>
    </head>
    <body>
<a href="data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" download="image.png" id="embedImage">Download</a>
    </body>
</html>
Community
  • 1
  • 1
Zentoaku
  • 766
  • 4
  • 12
  • the javascript solution it saved thi image but not in this way name.png or name.jpg it's allow you juste to download the image in the default download folder of your browser :( – karim karim Jul 30 '14 at 12:36
  • 1
    @karimkarim added answer that rename downloaded file. but "download" attribute works only in newer browsers. – Zentoaku Jul 30 '14 at 13:03