Build a Image to Binary or Hexadecimal Codes Converter in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Image to Binary or Hexadecimal Codes Converter in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a image to binary or hexadecimal codes converter in browser using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div class="container">
  <input type="file" class="control" />
  <label for="is-hex">
    <input type="checkbox" id="is-hex" value="false"/>
    enable hex value
  </label>
  <div class="output"></div>
</div>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

html {
     font-size: 14px;
}
 body {
     font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji";
}
 .container {
     width: 85%;
     max-width: 720px;
     background: #f1f2f3;
     margin: 0.65rem auto;
     padding: 0.65rem;
     border-radius: 4px;
}
 .output {
     margin-top: 0.65rem;
     font-family: courier, sans-serif;
     font-size: 1rem;
}

 

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

"use strict";

;

((win, doc) => {
  'use strict'; // var store = Object.create(null)

  const $ = selector => doc.querySelector(selector); // if binary, pad('1', 8) => 00000001


  const pad = (str, len) => str.length < len ? pad('0' + str, len) : str; // input[type="file"]


  let control = $('.control'),
      output = $('.output'),
      checkbox = $('[type="checkbox"]'),
      af = null,
      store = {}; // using Promise handling file processing

  const readFile = file => {
    let FR = new FileReader();
    return new Promise((resolve, reject) => {
      FR.onloadend = evt => {
        resolve(evt.target.result);
      };

      FR.onerror = err => {
        reject(event.target.error);
      };

      FR.readAsArrayBuffer(file);
    });
  };

  const showData = () => {
    // if check checkbox before select a file, return
    if (!af) {
      return;
    } // toString => binary:2 || hex:16 


    let scale = !checkbox.checked ? 2 : 16 // format style purpose
    // 8 => binary: 1 => 00000001 || 2 => hex: 1 => 01   
    ,
        padValue = scale === 2 ? 8 : 2,
        view = new DataView(af),
        result = '',
        offset = 8 / 8; // if value has been cache in store, use store value

    if (store[scale]) {
      output.innerHTML = store[scale];
      return;
    }

    for (let i = 0; i < view.byteLength; i += offset) {
      let value = view.getUint8(i).toString(scale === 2 ? 2 : 16);
      result += pad(value, padValue) + ' '; // make 4 byte per line

      result += (i - 3) % 4 === 0 ? '<br/>' : '';
    } // make 1st-time-value into store then output result


    store[scale] = output.innerHTML = result;
  };

  control.onchange = e => {
    readFile(e.target.files[0]) // set file buffer 
    .then(fileBuffer => {
      af = fileBuffer;
    }).then(() => showData());
  };

  checkbox.onchange = showData;
})(window, document);

 

See also  Build a jQuery Fake Login Page in Browser Using HTML5 CSS3 and Vanilla Javascript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply