Convert an Image into Binary Data in JavaScript

How convert image into binary format using javascript

Found a base64 encoding to binary function online that goes something like this:

function binEncode(data) {
    var binArray = []
    var datEncode = "";

    for (i=0; i < data.length; i++) {
        binArray.push(data[i].charCodeAt(0).toString(2)); 
    } 
    for (j=0; j < binArray.length; j++) {
        var pad = padding_left(binArray[j], '0', 8);
        datEncode += pad + ' '; 
    }
    function padding_left(s, c, n) { if (! s || ! c || s.length >= n) {
        return s;
    }
    var max = (n - s.length)/c.length;
    for (var i = 0; i < max; i++) {
        s = c + s; } return s;
    }
    console.log(binArray);
}

To use the function you would call binEncode with a base64 string as parameter.

To convert your image into a base64 encoded string, you could do:

var myCanvas = $('<canvas/>');
var myImageSrc = myCanvas.attr('src', 'http://www.google.com/imgres?imgurl=http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg&imgrefurl=http://www.gettyimages.co.uk/&h=280&w=562&tbnid=Gd_Suvvlpe2UbM:&docid=tUvJ118IkhewgM&ei=kZjVVcXQO8np-QGkjoSYAQ&tbm=isch&ved=0CDIQMygAMABqFQoTCIXdpbqnt8cCFcl0PgodJAcBEw');
myCanvas.attr('src', myImageSrc);
var dataInBase64 = $(myCanvas)[0].toDataURL('image/png').replace(/data\:image\/png;base64,/, '');

To get the base64 to binary:

binEncode(dataInBase64);

Convert an image into binary data in javascript

I think Get image data in JavaScript? answers your question:

// Code taken from MatthewCrumley (https://stackoverflow.com/a/934925/298479)
function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to guess the
    // original format, but be aware the using "image/jpg" will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Pass the img tag to this function. It will return the image in base64 encoding. It will be re-encoded though. So you cannot access the original image data.

How to convert image.png to binary in NodeJS?

To base 64:

const file = fs.readFileSync('/some/place/image.png')
const base64String = Buffer.from(file).toString('base64')

Then pass the base64String to Azure

If you want just a BLOB so a binary file, you can do this

const file = fs.readFileSync('/some/place/image.png')
const blob = Buffer.from(file)

convert image to binary data . How can i do?

You can convert to an array of Bytes. There are tools to do so. For example bin2c.

including image in request body as binary data

include formData as axios data parameter instead of your data object, so you can also include uploadLink in the formData:

const formData = new FormData();
formData.append('selectedFile', new Blob([selectedFile], { type: 'application/octet-stream' }));
formData.append('uploadLink', uploadLink)

//...
await axios
.post(`${backendPostPath}/thumbnail-upload`, formData, {
  headers,
})

Convert binary image data received from the server to img without base64

Try this:

const load = async () => {
  loaded.value = false

  try {
    const res = await axios.get(src.value, {
      responseType: 'blob', 
      headers: { 'X-Chat-Session': sessid }
    })

    console.log(res.data)
    const url = URL.createObjectURL(res.data)
    <image element>.src = url;

    loaded.value = true
    emit('loaded')
  } catch (e) {
    emit('loadingError', e)
  }
}