title: How do I use Sha256 on a file(binary file such as images) in javascript?
body: <p>I am trying to do a Sha256 on a file in Javascript. I used <a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow">FileReader(HTML5)</a> to read in a file. I use the readAsBinaryString function in the FileReader to pass in the images file. Then on the FileReader.onload function I pass in the evt.target.result to the SHA256 method in the <a href="http://code.google.com/p/crypto-js/#PBKDF2" rel="nofollow">CryptoJs API</a>. I am able to successfully get a hash value but it is not correct. When I pass in a text file, it works fine but not image file. </p>
  
  <p>Code(Should be able to copy the code below to a HTML file and run it on firefox - press the "entire file" button):</p>
  
  <pre><code>&lt;style&gt;
    #byte_content {
      margin: 5px 0;
      max-height: 100px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    #byte_range { margin-top: 5px; }
  &lt;/style&gt;
  
  &lt;input type="file" id="files" name="file" /&gt; Read bytes: 
  &lt;span class="readBytesButtons"&gt;
    &lt;button data-startbyte="0" data-endbyte="4"&gt;1-5&lt;/button&gt;
    &lt;button data-startbyte="5" data-endbyte="14"&gt;6-15&lt;/button&gt;
    &lt;button data-startbyte="6" data-endbyte="7"&gt;7-8&lt;/button&gt;
    &lt;button&gt;entire file&lt;/button&gt;
  &lt;/span&gt;
  &lt;div id="byte_range"&gt;&lt;/div&gt;&lt;BR&gt;
  &lt;div id="byte_content"&gt;&lt;/div&gt;&lt;BR&gt;
  &lt;div id="crypto_sha256"&gt;&lt;/div&gt;
  
  &lt;script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js"&gt;&lt;/script&gt;
  &lt;script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/enc-base64-min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
    var sha256;
  
    function readBlob(opt_startByte, opt_stopByte) {
  
      var files = document.getElementById('files').files;
      if (!files.length) {
        alert('Please select a file!');
        return;
      }
  
      var file = files[0];
      var start = parseInt(opt_startByte) || 0;
      var stop = parseInt(opt_stopByte) || file.size - 1;
  
      var reader = new FileReader();
  
      // If we use onloadend, we need to check the readyState.
      reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) { // DONE == 2
          document.getElementById('byte_content').textContent = evt.target.result;
          document.getElementById('byte_range').textContent = 
              ['Read bytes: ', start + 1, ' - ', stop + 1,
               ' of ', file.size, ' byte file'].join('');
  
          //**UPDATED SOLUTION: Since its binary data, the message needs to be converted from string to bytes using Latin1**
              sha256.update(CryptoJS.enc.Latin1.parse(evt.target.result));
  
          var hash = sha256.finalize();
  
          document.getElementById('crypto_sha256').textContent = ['SHA-256: ', hash].join('');
        }
      };
  
      var blob = file.slice(start, stop + 1);
      reader.readAsBinaryString(blob);
    }
  
    document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
      if (evt.target.tagName.toLowerCase() == 'button') {
        var startByte = evt.target.getAttribute('data-startbyte');
        var endByte = evt.target.getAttribute('data-endbyte');
  
        sha256 = CryptoJS.algo.SHA256.create();
  
        readBlob(startByte, endByte);
      }
    }, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>Sample outputs:</p>
  
  <ol>
  <li><p>Testing a "text" file:</p>
  
  <ul>
  <li>SHA256 generated by Javascript:<br>
  <strong>78cb5e86455dc8e3bc20fe17e0213a938281216d57b31f8307f5bca67c37bb09</strong></li>
  <li>SHA256 generated by cygwin on the same file:<BR>
  $ sha256sum Phillips.txt
  <strong>78cb5e86455dc8e3bc20fe17e0213a938281216d57b31f8307f5bca67c37bb09</strong> *SomeTestFile.txt</li>
  </ul></li>
  <li><p>Testing a "binary" file(pdf):</p>
  
  <ul>
  <li>SHA256 generated by Javascript:<BR>
  <strong>57f93c1d20a8ad8ade984a1d9756c1a40600bd8a7527601945c4e0b5e042c605</strong></li>
  <li>SHA256 generated by cygwin on the same file:<BR>
  $ sha256sum Smoke\ Detector\ Brochure.pdf
  <strong>57f93c1d20a8ad8ade984a1d9756c1a40600bd8a7527601945c4e0b5e042c605</strong> *Smoke Detector Brochure.pdf</li>
  </ul></li>
  </ol>