Question

我正试图找到一个技巧来保存用Data-URI编码的图片，如下所示：

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

另一个问题：图片是否第一次保存在服务器中？浏览器？

Answer 1

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.';
?>

编辑JS解决方案2（小提琴：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>

如何保存以Data-URI编码的图像？

1 个答案: