сохранить изображение на диск пользователя, используя JavaScript - PullRequest
Новая
       13

сохранить изображение на диск пользователя, используя JavaScript

23 голосов
/ 31 октября 2011

Я передал источник для HTML-тега как base64String, используя JavaScript. изображение было отображено четко. Теперь я хочу сохранить это изображение на диск пользователя, используя JavaScript. 

<html>
<head>
<script>
function saveImageAs () {
var imgOrURL;
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+
"9TXL0Y4OHwAAAABJRU5ErkJggg==";
imgOrURL = embedImage;
if (typeof imgOrURL == 'object')
   imgOrURL = embedImage.src;
window.win = open(imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 0);
}
</script>
</head>
<body>
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a>

   <img id="embedImage" alt="Red dot">

</body>
</html>

этот код работал, когда мы передаем imagepath в качестве источника для тега, однако он не работал, когда мы передали sorce как base64String в тег.

, пожалуйста, предложите мне этот вопрос.

спасибо заранее.

Ответы [ 2 ]

29 голосов
/ 30 мая 2016

Просто чтобы позволить пользователю загрузить изображение или другой файл, вы можете использовать атрибут HTML5 download.

Загрузка статического файла 

<a href="/images/image-name.jpg" download>
<!-- OR -->
<a href="/images/image-name.jpg" download="new-image-name.jpg">

Динамическая загрузка файла

В случаях динамического запроса изображения можно эмулировать такую ​​загрузку.

Если ваше изображение уже загружено и у вас есть источник base64, тогда: 

saveBase64AsFile(base64, fileName) {

    var link = document.createElement("a");

    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

В противном случае, если файл изображения загружен как Blob, вы можете использовать FileReader для преобразования его в Base64: 

saveBlobAsFile(blob, fileName) {

    var reader = new FileReader();

    reader.onloadend = function () {    
        var base64 = reader.result ;
        var link = document.createElement("a");

        link.setAttribute("href", base64);
        link.setAttribute("download", fileName);
        link.click();
    };

    reader.readAsDataURL(blob);
}

Плохие новости!Будьте осторожны: IE не поддерживается: Caniuse link

21 голосов
/ 31 октября 2011

В JavaScript вы не можете иметь прямой доступ к файловой системе. Тем не менее, вы можете заставить браузер отображать диалоговое окно, позволяющее пользователю выбрать место сохранения. Для этого используйте метод replace с Base64String и замените "image/png" на "image/octet-stream": 

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

Кроме того, W3C-совместимые браузеры предоставляют 2 метода для работы с base64-закодированными и двоичными данными:

Возможно, вы найдете их полезными в некотором роде ...

Вот измененная версия того, что, как я понимаю, вам нужно: 

<!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>

Вы можете увидеть это в действии ЗДЕСЬ .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...