Как преобразовать изображение в строку base64 jQuery?

Ромчик
0

Доброго времени суток. При верстке сайта возникла необходимость в content поместить картинку преобразованную в строку base64. Вроде ничего сложного, но при поиске онлайн конвертера возникли трудности. Один конвертер накладывал ограничения на количество загружаемых файлов, другие работали некорректно или вообще не работали. Поэтому решил быстренько сделать свой конвертер с помощью JS.

И так, приступим…

Создадим index.html в котором основными элементами будут:

  • input с типом «file», с помощью которого мы будем выбирать файл с кортинкой
  • ссылка, в которую мы будем помещать строку в base64
  • и JavaScript в несколько строчек

Вот листинг файла index.html:


<!DOCTYPE html>

<html>

<head>

<title> Как преобразовать изображение в строку base64 jQuery?

</title>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>

</head>

<body>

<form>

<input type="file" name="image" onchange="encodeImage(this)">

<a class="link" href=""></a

</form>

</body>

<script type="text/javascript">

function encodeImage(element) {

var file = element.files[0];

var reader = new FileReader();

reader.onloadend = function() {

$(".link").attr("href",reader.result);

$(".link").text(reader.result);

}

reader.readAsDataURL(file);

}

</script>

</html>

Ну вот и все проверяем:

Конвертирование картинки в строку base64

Вывод

Мы с вами сделали простенький конвертер файлов в строку base64 с помощью JavaScript.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика