Can I convert an image FROM base64 to binary client side?

Active3 hr before
Viewed126 times

6 Answers


After manipulating an image using a canvas element and then getting the result via canvasImg.toDataURL( "image/jpeg", 1.0 ), is it possible to convert the result into a binary image file client-side? I am trying to avoid , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Thanks for contributing an answer to Stack Overflow!, By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Daniel C's comment led me to the solution (here at Convert Data URI to File then append to FormData).

The one extra thing I needed was URL.createObjectURL(blob), which gave me a string handle to pass the file around.


Decoding Base64 Strings with Node.js,Encoding Base64 Strings with Node.js,Decoding Base64 Strings to Binary Data,Encoding Binary Data to Base64 Strings

Suppose we have string "Go win" and we want to convert it into Base64 string. The first step is to convert this string into binary. The binary version of "Go win" is:

01000111 01101111 00100000 01110111 01101001 01101110
load more v

function getBase64(file) {
   return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);

var file = document.querySelector('#files > input[type="file"]').files[0];
   data => console.log(data)
load more v

This is so helpful! Thank you so much for putting all of the information together and clearing the confusion when working with file content in power automate.,If you want to get a multiple files contents, (.xls,.csv,.txt,.jpg) and send them in one email, which expression should be use to to fit all of them,I am not sure how it was working previously but as mentioned in my example below, you will need to provide Base64 value to create a Note attachment. If you are using the expression base64ToBinary(), the input value becomes binary and thus, it is failing with that error.,You will have to create multiple Attachment (ActivityMimeAttachment) rows with those file content as mentioned in the step 5 of this blog post.

   "$content-type": "image/png",
   "$content": "iVBORw0KG...i/DhQmCC"
load more v

How to save an HTML 5 Canvas as an image on the server ?,How to Convert Data URI to File then append to FormData?,CS SubjectsMathematicsOperating SystemDBMSComputer NetworksComputer Organization and ArchitectureTheory of ComputationCompiler DesignDigital LogicSoftware Engineering,Worst, Average and Best Cases


In this article, you are going to learn how to convert a Base64 string into a Blob to upload it as a file to our server. This approach will be equivalent to the action that an user does when he drags and drop a file into a file input.,We are going to use the following method to convert a base64 string into a blob:, Learn how to convert a base64 string of an image into a file to upload with an asynchronous javascript form to the server ,To get started, we need to convert a base64 string into a "file" using Javascript, to do that, we are going to convert a Base64 string to a Blob and that will be interpreted as a File in our server.

We are going to use the following method to convert a base64 string into a blob:

 * Convert a base64 string in a Blob according to the data and contentType.
 * @param b64Data {String} Pure base64 string without contentType
 * @param contentType {String} the content type of the file i.e (image/jpeg - image/png - text/plain)
 * @param sliceSize {Int} SliceSize to process the byteCharacters
 * @see
 * @return Blob
function b64toBlob(b64Data, contentType, sliceSize) {
   contentType = contentType || '';
   sliceSize = sliceSize || 512;

   var byteCharacters = atob(b64Data);
   var byteArrays = [];

   for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
         byteNumbers[i] = slice.charCodeAt(i);

      var byteArray = new Uint8Array(byteNumbers);


   var blob = new Blob(byteArrays, {
      type: contentType
   return blob;
load more v

Other "convert-image" queries related to "Can I convert an image FROM base64 to binary client side?"