Bitmap to base64 android kotlin

Base64 String to Image example – Kotlin

This example is targeting conversion of Base64 String to Image and representing that image on screen using Kotlin programming language language. The advantages of using Base64 string to image is the load times, especially if you are getting the image from server. The downside of using Base64 String is that the encoded file will be 137% of the size of original file. This action is good if you are consuming a lot of small from server and showing them rapidly.

In previous post about Base64 String to Image we have used Java programming language to do the job, now we are going to use Kotlin for that purpose.

What is Base64?

Base64 is used to transmit data over text based mediums where the original byte values of the data are important. Some systems may alter the original bytes of a string due to differing text encodings. Additionally, text based systems typically can’t handle full binary data. To be able to transmit a hash fingerprint for example, a receiver needs to be able to receive the exact same byte values sent by the originator. If the byte values were to change, verification of the digital signature would fail. You’ll find Base64 used in SSL certificates, SAML assertions for single sign on systems, embedding data in XML and HTML, as well as many other use cases. More for Base64 you can find here.

The Main Activity XML:

In this Activity, there is nothing more than to show the image on screen. Because of that we use only one defined ImageView

Источник

Kotlin Base64 Encoding and Decoding

In this tutorial, I will show you how to make Base64 encoding and decoding functionality in Kotlin/Android. We’re gonna convert several kinds of String to Base64, then decode Base64 to original String.

Overview

This is step by step to encode and decode with Kotlin Base64.
– Encoding (convert String to Base64):

• convert String to ByteArray using toByteArray() method
• call encode method (depending on library) to get Base64 String from ByteArray above

– Decoding (convert Base64 to String):

• retrieve ByteArray from Base64 String using decode method (depending on library)
• convert the ByteArray into String object using String constructor

We’re gonna import one of these libraries that support Base64 Encoding and Decoding:

Let’s implement these steps with the libraries in the next sections.

Using java.util.Base64

This library supports the following types of Base64 as specified in RFC 4648 and RFC 2045:

Basic

– Uses “The Base64 Alphabet” as specified in Table 1 of RFC 4648 and RFC 2045 for encoding and decoding operation.
– Encoding: not add any line feed (line separator) character.
– Decoding: not contain characters outside the Base64 Alphabet.

– Uses the “URL and Filename safe Base64 Alphabet” as specified in Table 2 of RFC 4648 for encoding and decoding.
– Encoding: not add any line feed (line separator) character.
– Decoding: not contain characters outside the Base64 Alphabet.

MIME

– Uses the “The Base64 Alphabet” as specified in Table 1 of RFC 2045 for encoding and decoding operation.
– Encoding: result must be represented in lines of no more than 76 characters each and use a carriage return followed by a linefeed (\r\n). No line separator is added to the end.
– Decoding: not contain line separators or other characters outside the Base64 Alphabet.

Basic Base64 encode

– Step by step to encode:

• get ByteArray from original String using toByteArray() method
• use Base64.getEncoder() static method to get Encoder that encodes using the Basic type Base64 encoding scheme
• call Encoder encodeToString() method on ByteArray above

– Step by step to decode:

• use Base64.getDecoder() to get Decoder that decodes using the Basic type base64 encoding scheme.
• call decode() method that returns a ByteArray
• use constructor of the String class on ByteArray above to get String result

Base64 encode without Padding

In Base64 encoding, the length of output encoded String must be a multiple of 3. If it’s not, pad characters (‘=’) will be added to the output.

For more details about padding in Base64, please visit the answer on StackOverflow.

To encode Base64 without padding, we call withoutPadding() that returns an encoder instance that encodes without adding any padding character at the end of the encoded byte data.

Base64 encode Url

URL encoding uses the URL and Filename safe Base64. It is similar to the basic encoder above.
– Step by step to encode:

• get ByteArray from original Url using toByteArray() method
• use Base64.getUrlEncoder() static method to get Encoder that encodes using the URL and Filename safe type base64 encoding scheme
• call Encoder encodeToString() method on ByteArray above

– Step by step to decode:

• use Base64.getUrlDecoder() to get Decoder that decodes using the URL and Filename safe type base64 encoding scheme
• call decode() method that returns a ByteArray
• use constructor of the String class on ByteArray above to get String result

Base64 encode MIME

The MIME encoder generates a Base64 encoded output but in a MIME friendly format.
Now we create a function to generate a MIME buffer for test:

– Step by step to encode:

• get ByteArray from original MIME buffer using toString() & toByteArray() method
• use Base64.getMimeEncoder() static method to get Encoder that encodes using the MIME type base64 encoding scheme
• call Encoder encodeToString() method on ByteArray above

– Step by step to decode:

• use Base64.getMimeDecoder() to get Decoder that decodes using the MIME type base64 decoding scheme.
• call decode() method that returns a ByteArray
• use constructor of the String class on ByteArray above to get String result

Using javax DatatypeConverter

– Step by step to encode:

• get ByteArray from original MIME buffer using toString() & toByteArray() method
• use DatatypeConverter.printBase64Binary() method on ByteArray above

– Step by step to decode:

• call DatatypeConverter.parseBase64Binary() method that returns a ByteArray
• use constructor of the String class on ByteArray above to get String result

Using Apache Commons Codec

First we need to add Apache Commons Codec library to our Kotlin project.
There are two ways:

• Add dependency to pom.xml
• Download jar file here, then add it as external library.

we’re gonna import org.apache.commons.codec.binary.Base64 class. Depending on the constructor, we can create Base64 object with different purpose and usage:

• Base64(boolean urlSafe) : URL safe mode (default is off ).
• Base64(int lineLength) : URL unsafe mode with the length of the line (default is 76 )
• Base64(int lineLength, byte[] lineSeparator) : with line separator (default is CRLF «\r\n» )

– Step by step to encode:

• get ByteArray from original MIME buffer using toString() & toByteArray() method
• use contructor method to get Base64 object
• call encode() method on ByteArray above

If we use val base64 = Base64(8) , the result will be like this-

– Step by step to decode:

• call decode() method that returns a ByteArray
• get String result using constructor of the String class on ByteArray above

Источник

Класс Bitmap

Вам часто придётся иметь дело с изображениями котов, которые хранятся в файлах JPG, PNG, GIF. По сути, любое изображение, которое мы загружаем из графического файла, является набором цветных точек (пикселей). А информацию о каждой точке можно сохранить в битах. Отсюда и название — карта битов или по-буржуйски — bitmap. У нас иногда используется термин растр или растровое изображение. В Android есть специальный класс android.graphics.Bitmap для работы с подобными картинками.

Существуют готовые растровые изображения в файлах, о которых поговорим ниже. А чтобы создать с нуля объект Bitmap программным способом, нужно вызвать метод createBitmap():

В результате получится прямоугольник с заданными размерами в пикселях (первые два параметра). Третий параметр отвечает за информацию о прозрачности и качестве цвета (в конце статьи есть примеры).

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

Bitmap.Config

Кроме размеров, желательно знать цветовую схему. У класса Bitmap есть метод getConfig(), который возвращает перечисление Bitmap.Config.

Всего существует несколько элементов перечисления.

• Bitmap.Config ALPHA_8 — каждый пиксель содержит в себе информацию только о прозрачности, о цвете здесь ничего нет. Каждый пиксель требует 8 бит (1 байт) памяти.
• Bitmap.Config ARGB_4444 — устаревшая конфигурация, начиная с API 13. Аналог ARGB_8888, только каждому ARGB-компоненту отведено не по 8, а по 4 бита. Соответственно пиксель весит 16 бит (2 байта). Рекомендуется использовать ARGB_8888
• Bitmap.Config ARGB_8888 — на каждый из 4-х ARGB-компонентов пикселя (альфа, красный, зеленый, голубой) выделяется по 8 бит (1 байт). Каждый пиксель занимает 4 байта. Обладает наивысшим качеством для картинки.
• Bitmap.Config RGB_565 — красному и и синему компоненту выделено по 5 бит (32 различных значений), а зелёному — шесть бит (64 возможных значений). Картинка с такой конфигурацией может иметь артефакты. Каждый пиксель будет занимать 16 бит или 2 байта. Конфигурация не хранит информацию о прозрачности. Можно использовать в тех случаях, когда рисунки не требуют прозрачности и высокого качества.

Конфигурация RGB_565 была очень популярна на старых устройствах. С увеличением памяти и мощности процессоров данная конфигурация теряет актуальность.

В большинстве случаев вы можете использовать ARGB_8888.

Получив объект в своё распоряжение, вы можете управлять каждой его точкой. Например, закрасить его синим цветом.

Чтобы закрасить отдельную точку, используйте метод setPixel() (парный ему метод getPixel позволит узнать информацию о точке). Закрасим красной точкой центр синего прямоугольника из предыдущего примера — имитация следа от лазерной указки. Котам понравится.

В нашем случае мы создали растровое изображение самостоятельно и можем на него воздействовать. Но если вы загрузите готовое изображение из файла и попытаетесь добавить к нему красную точку, то можете получить крах программы. Изображение может быть неизменяемым, что-то типа «Только для чтения», помните об этом.

Созданный нами цветной прямоугольник и управление отдельными точками не позволят вам нарисовать фигуру, не говоря уже о полноценном рисунке. Класс Bitmap не имеет своих методов для рисования, для этого есть метод Canvas (Холст), на котором вы можете размещать объекты Bitmap.

Когда вы размещали в разметке активности компонент ImageView и присваивали атрибуту android:src ресурс из папок drawable-xxx, то система автоматически выводила изображение на экран.

Если нужно программно получить доступ к битовой карте (изображению) из ресурса, то используется такой код:

Обратный процес конвертации из Bitmap в Drawable:

Изображение можно сохранить, например, на SD-карту в виде файла (кусок кода):

Каждая точка изображения представлена в виде 4-байтного целого числа. Сначала идёт байт прозрачности — значение 0 соответствует полной прозрачности, а 255 говорит о полной непрозрачности. Промежуточные значения позволяют делать полупрозрачные изображения. Этим искусством в совершенстве владел чеширский кот, который умело управлял всеми точками своего тела и растворялся в пространстве, только улыбка кота долго ещё висела в воздухе (что-то я отвлёкся).

Следующие три байта отвечают за красный, зелёный и синий цвет, которые работают по такому же принципу. Т.е. значение 255 соответствует насыщенному красному цвету и т.д.

Так как любое изображение кота — это набор точек, то с помощью метода getPixels() мы можем получить массив этих точек, сделать с этой точкой что-нибудь нехорошее (поменять прозрачность или цвет), а потом с помощью родственного метода setPixels() записать новые данные обратно в изображение. Так можно перекрасить чёрного кота в белого и наоборот. Если вам нужна конкретная точка на изображении, то используйте методы getPixel()/setPixel(). Подобный подход используется во многих графических фильтрах. Учтите, что операция по замене каждой точки в большом изображении занимает много времени. Желательно проводить подобные операции в отдельном потоке.

На этом базовая часть знакомства с битовой картой закончена. Теперь подробнее.

Учитывая ограниченные возможности памяти у мобильных устройств, следует быть осторожным при использовании объекта Bitmap во избежание утечки памяти. Не забывайте освобождать ресурсы при помощи метода recycle(), если вы в них не нуждаетесь. Например:

Почему это важно? Если не задумываться о ресурсах памяти, то можете получить ошибку OutOfMemoryError. На каждое приложение выделяется ограниченное количество памяти (heap size), разное в зависимости от устройства. Например, 16мб, 24мб и выше. Современные устройства как правило имеют 24мб и выше, однако это не так много, если ваше приложение злоупотребляет графическими файлами.

Bitmap на каждый пиксель тратит в общем случае 2 или 4 байта (зависит от битности изображения – 16 бит RGB_555 или 32 бита ARGB_888). Можно посчитать, сколько тратится ресурсов на Bitmap, содержащий изображение, снятое на 5-мегапиксельную камеру.

При соотношении сторон 4:3 получится изображение со сторонами 2583 х 1936. В конфигурации RGB_555 объект Bitmap займёт 2592 * 1936 * 2 = около 10Мб, а в ARGB_888 (режим по умолчанию) в 2 раза больше – чуть более 19Мб.

Во избежание проблем с памятью прибегают к помощи методов decodeXXX() класса BitmapFactory.

Если установить атрибут largeHeap в манифесте, то приложению будет выделен дополнительный блок памяти.

Ещё одна потенциальная проблема. У вас есть Bitmap и присвоили данный объект кому-то. Затем объект был удалён из памяти, а ссылка на него осталась. Получите крах приложения с ошибкой типа «Exception on Bitmap, throwIfRecycled».

Возможно, лучше сделать копию.

Получить Bitmap из ImageView

Если в ImageView имеется изображение, то получить Bitmap можно следующим образом:

Но с этим способом нужно быть осторожным. Например, если в ImageView используются элементы LayerDrawable, то возникнет ошибка. Можно попробовать такой вариант.

Более сложный вариант, но и более надёжный.

Изменение размеров — метод createScaledBitmap()

С помощью метода createScaledBitmap() можно изменить размер изображения.

Будем тренироваться на кошках. Добавим картинку в ресурсы (res/drawable). В разметку добавим два элемента ImageView

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

Кадрирование — метод createBitmap()

Существует несколько перегруженных версий метода Bitmap.createBitmap(), с помощью которых можно скопировать участок изображения.

• сreateBitmap(Bitmap source, int x, int y, int width, int height, Matrix m, boolean filter) — Returns an immutable bitmap from subset of the source bitmap, transformed by the optional matrix.
• createBitmap(int width, int height, Bitmap.Config config) — Returns a mutable bitmap with the specified width and height.
• createBitmap(Bitmap source, int x, int y, int width, int height) — Returns an immutable bitmap from the specified subset of the source bitmap.
• createBitmap(int[] colors, int offset, int stride, int width, int height, Bitmap.Config config) — Returns a immutable bitmap with the specified width and height, with each pixel value set to the corresponding value in the colors array.
• createBitmap(Bitmap src) — Returns an immutable bitmap from the source bitmap.
• createBitmap(int[] colors, int width, int height, Bitmap.Config config) — Returns a immutable bitmap with the specified width and height, with each pixel value set to the corresponding value in the colors array.

Описываемый ниже код не является оптимальным и очень ресурсоёмкий. На больших изображениях код будет сильно тормозить. Приводится для ознакомления. Чтобы вывести часть картинки, можно сначала создать нужный Bitmap с заданными размерами, занести в массив каждый пиксель исходного изображения, а затем этот же массив вернуть обратно. Но, так как мы уже задали другие размеры, то часть пикселей не выведутся.

По аналогии мы можем вывести и нижнюю правую часть изображения:

Немного модифицировав код, мы можем кадрировать центр исходного изображения. Предварительно придётся проделать несколько несложных вычислений.

Скриншот приводить не буду, проверьте самостоятельно.

Меняем цвета каждого пикселя

Через метод getPixels() мы можем получить массив всех пикселей растра, а затем в цикле заменить определённым образом цвета в пикселе и получить перекрашенную картинку. Для примера возьмем стандартный значок приложения, поместим его в ImageView, извлечём информацию из значка при помощи метода decodeResource(), применим собственные методы замены цвета и полученный результат поместим в другие ImageView:

Код для класса активности:

На скриншоте представлен оригинальный значок и три варианта замены цветов.

Ещё один пример, где также в цикле меняем цвет каждого пикселя Green->Blue, Red->Green, Blue->Red (добавьте на экран два ImageView):

Конвертируем Bitmap в байтовый массив и обратно

Сжимаем картинку

В предыдущем примере вызывался метод compress(). Несколько слов о нём. В первом аргументе передаём формат изображения, поддерживаются форматы JPEG, PNG, WEBP. Во втором аргументе указываем степень сжатия от 0 до 100, 0 — для получения малого размера файла, 100 — максимальное качество. Формат PNG не поддерживает сжатие с потерей качества и будет игнорировать данное значение. В третьем аргументе указываем файловый поток.

Как раскодировать Bitmap из Base64

Если изображение передаётся в текстовом виде через Base64-строку, то воспользуйтесь методом, позволяющим получить картинку из этой строки:

Вычисляем средние значения цветов

Дополнительные материалы

На StackOverFlow есть интересный пример программной генерации цветных квадратов с первой буквой слова. В пример квадрат используется как значок к приложению. Также популярен этот приём в списках. Квадраты также заменять кружочками.

Источник