Как ввести файл изображения от пользователя, а затем base64 кодировать его в javascript? - PullRequest
Новая
       7

Как ввести файл изображения от пользователя, а затем base64 кодировать его в javascript?

0 голосов
/ 27 февраля 2020

Я пытаюсь принять изображение в качестве входного файла от пользователя и отобразить его в виде строки в кодировке base64. Вот мой код 

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Convert Image to Base64 String</title>
</head>
<body>

    <input type="file" name="upload" id="file" accept="image/*">
    <br>
    <br>    
    <button type="button" onclick="showResult()">Show Source</button>
    <div id="image-source">Image Source :</div>
    <br>
    <div>Data URL:</div>
    <div id="result"></div>
    <script type="text/javascript">
        function toDataURL(src, callback) {
            var xhttp = new XMLHttpRequest();

            xhttp.onload = function() {
                var fileReader = new FileReader();
                fileReader.onloadend = function() {
                    callback(fileReader.result);
                }
                fileReader.readAsDataURL(xhttp.response);
            };

            xhttp.responseType = 'blob';
            xhttp.open('GET', src, true);
            xhttp.send();
        }



        showResult(){
            var x = document.getElementById("file").value;
            document.getElementById("image-source").innerHTML = x;
            toDataURL(x, function(dataURL) {
            // do something with dataURL
            document.getElementById('result').innerHTML = dataURL;
        });
        }


    </script>

</body>
</html>

Нужно ли отдельно хранить источник изображения для его кодирования? Есть ли более простой способ кодировать загруженное пользователем изображение ??

1 Ответ

1 голос
/ 27 февраля 2020

Вот простой пример преобразования первого изображения, выбранного с помощью кнопки просмотра файла. Чтение файла происходит на стороне клиента после выбора изображения. Чтение файла асинхронное , поэтому я пообещал функцию чтения файла: 

"use strict";

const fileDataURL = file => new Promise((resolve,reject) => {
    let fr = new FileReader();
    fr.onload = () => resolve( fr.result);
    fr.onerror = reject;
    fr.readAsDataURL( file)
});

function showResult(file) {
    fileDataURL( file)
    .then( data => (document.getElementById("result").textContent = data))
    .catch(err => console.log(err));
}
#result {
   width: 80%;
   font-family: monospace;
   overflow-wrap: break-word;
}
<p>
<input type="file" onchange="showResult( this.files[0]);" accept="image/*">
<div>Data URL:</div>
<div id="result"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...