title: How to store and retrieve image to localStorage?
body: <p>Thought I had this, but no. The goal: snap a photo (insurance card), save it locally, and retrieve it later.</p>
  
  <pre><code>// Get a reference to the image element
  var elephant = document.getElementById("SnapIt_mobileimage_5");
  
  var imgCanvas = document.createElement("canvas"),
  imgContext = imgCanvas.getContext("2d");
  
  // Make sure canvas is as big as the picture
  imgCanvas.width = elephant.width;
  imgCanvas.height = elephant.height;
  
  // Draw image into canvas element
  
  imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height );
   console.log( 'Did that' );
  // Get canvas contents as a data URL
  var imgAsDataURL = imgCanvas.toDataURL("data:image/jpg;base64,");
  
  // Save image into localStorage
  try {
  localStorage.setItem("elephant", imgAsDataURL);
  }
  catch (e) {
  console.log("Storage failed: " + e);
  }; 
  
  //Did it work?
  var pic = localStorage.getItem("elephant");
  
  console.log( elephant );
  console.log( pic );
  </code></pre>
  
  <p>Each step succeeds, the final output is:</p>
  
  <pre><code>&lt;img id="SnapIt_mobileimage_5" class=" SnapIt_mobileimage_5" name="mobileimage_5" dsid="mobileimage_5" src="files/views/assets/image/IMG_0590.JPG"&gt;
   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
  </code></pre>
  
  <p>On a new page, when I ask</p>
  
  <pre><code>var policy_shot = localStorage.getItem( 'elephant' );
  console.log( policy_shot );
  
  $('#TestScreen_mobileimage_1').src = policy_shot ;
  </code></pre>
  
  <p>It logs the binary:</p>
  
  <pre><code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ....
  </code></pre>
  
  <p>But the image doesn't appear.</p>
  
  <ol>
  <li>Is there a simpler approach?</li>
  <li>Why is the getItem (binary) preceded by data:image/png; instead of data:image/jpg ?</li>
  <li>Is that why it doesn't display, or am I doing something else wrong?</li>
  </ol>