I need to convert a base64 string of an image to a Uint8Array to be inputted in a machine learning model. I've been attempting to convert the base64 to Uint8Array with this Node.js code:
new Uint8Array(Buffer.from(base64String, 'base64'));
Where base64 is a base64 encoded image. I've attached the base64 in this gist.
Since the image is 100x100, I would expect the Uint8Array to have 30,000 values (3 values per pixel due to RGB, and 10,000 total pixels). This is also what my machine learning model expects. However, after running that code, the Uint8Array only has 3889 values according to uintarray.length. I've tried multiple methods in different environments to get the Uint8Array and it's always 3889.
When I print the Uint8Array, I see a list of 3889 numbers from 0-255. When I convert the Uint8Array back to base64 through Buffer.from(uintarray).toString('base64'), it returns the correct base64.
Why are there only 3889 values in my Uint8Array instead of 30,000? How can I get the array in the format that I want, with three values for each pixel and 10,000 pixels?
Related
I didn't see any example of reverting human-readable file size to an integer
There're a lot of functions which help to convert file size to human readble, such as:
1024 bytes -> 1KB. Here is an question about this: Converting file size in bytes to human-readable string
But I didn't see anywhere to support revert the process, such as: 1Kb -> 1024.
I recieved data from backend API, and it returns, for example 10MB, and I want to convert this String to an integer (bytes) to compare file sizes of multiple files. How to I do this in Javascript?
I want to fetch some binary encoded data and split it into two objects. It's half Uint32Array and half BigInt64Array. How would I do the split without copying? The doc say it does the copy.
I have generated a Base64 string, which I have shared as an image using Capacitor FileSharer,
for this I have used two approaches-
img.split(',')[1],
This I have understood as how it is giving me the image file from removing the "data:image" from the string.
img.replace(/^data:image\/[a-z]+;base64,/, "")
This I haven't understood properly as what functions it is performing to the string that I am getting a image file. Anyone If possible, do provide an explanation.
Though I have used both of them, and both works fine. It is only I am asking because ,If I am using any property in my project , I should now how it is actually working.
(PS- I am new to Javascript )
Introduction of Base64 encoding
In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Three 8-bit bytes (i.e., a total of 24 bits) can therefore be represented by four 6-bit Base64 digits (you can read more here).
Where can we use Base64 encoding on images specifically?
Basically, there are multiple advantages in using base64 images or even files such as pdf, csv, etc., in web interactions:
For storying them easily in databases as string and retrieve them accordingly.
In JSON or XML based web architectures (such as REST or SOAP) usually is hard to send images along side with form data. For example, sending profile picture along side with user form data such as username, password, first name, last name, etc., in JSON format.
Security! Anyone who does not know anything about base64 encoding cannot open files easily as it should be.
What is the correct way to insert Buffer as BLOB just 1-to-1 without serializing to string/hex? Is it possible at all from Node.js?
At my backend I already have Buffers with binary data and want to store them with minimum overheads using prepared statements. I'm getting ER_TRUNCATED_WRONG_VALUE_FOR_FIELD errno:1366 Incorrect string value error. It looks like the library just assumes there is a valid utf8 string in a buffer.
I'm trying to decode a base64 string representing an image stored in a db.
I tried many libraries and solutions provided on SO, but I'm still unable to decode the image correctly. In particular, using the following code:
var img = new Buffer(b64, 'base64').toString('ascii');
I get a similar binary representation, except for the first bytes.
This is the initial part of the base64 string:
/9j/4RxVRXhpZgAASUkqAAgAAAANADIBAgAUAAAAqgAAACWIBAABAAAAiwYAABABAgAIAAAAvgAA
Here are the first 50 bytes of the original image:
ffd8ffe11c5545786966000049492a00080000000d003201020014000000aa00000025880400010000008b06000010010200
And here are the first 50 bytes of the string I get with javascript:
7f587f611c5545786966000049492a00080000000d0032010200140000002a00000025080400010000000b06000010010200
How you can see, the two strings are identical except for the fisrt 3 bytes and some few bytes in the middle.
Can somebody help me understand why this is happening and how to solve it? Thanks
The problem is that you're trying to convert binary data to ASCII, which most likely than not, will mean loss of data since ASCII only consists of values 0x00-0x7F. So when the conversion takes place, all bytes > 0x7F are capped at 0x7F.
If you do this instead, you can see the data matches your first 50 bytes of the original image:
console.log(Buffer.from(b64, 'base64').toString('hex'));
But if you want to keep the binary data intact, just keep it as a Buffer instance without calling .toString(), as many functions that work with binary data can deal with Buffers (e.g. fs core module).