title: Can I load a local file into an html canvas element?
body: <p>My goal is to have users on iPad load an image into a canvas, then get the base 64 encoded said image all while being <strong>OFFLINE</strong></p>
  
  <h2>JSFiddle</h2>
  
  <p><a href="http://jsfiddle.net/Vm4za/1/" rel="noreferrer">JSFiddle</a></p>
  
  <h2>Code</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="../js/libs/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function(){ 
          //Get the canvas
          var canvas = document.getElementById('testCanvas');
          var context = canvas.getContext('2d');   
  
          $("#testButton").click(function(){
            var base_image = new Image();
  
            base_image.src = $("#testImg").val();
            //base_image.src = '1.jpg';
  
            //When the image loads
            $(base_image).load(function(){
              //Resize canvas for image
              $("#testCanvas").attr({
                width: base_image.width,
                height: base_image.height
              });
  
              //Draw image on canvas
              context.drawImage(base_image, 0, 0);
  
              //Get base64 encoded image
              var imageString = canvas.toDataURL("image/jpeg");
              $("#imageString").val(imageString);
  
              //alert($("#imageString").val().length);
              $("#imageOutput").attr("src", imageString);
            });//image load
          });//Test Button Click
        });//doc ready
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;form&gt;
        &lt;input type="file" name="testImg" id="testImg" /&gt;
      &lt;/form&gt;
      &lt;button id="testButton"&gt;Test&lt;/button&gt;
      &lt;canvas id="testCanvas" style="border: 1px solid black;"&gt;Your Browser does not support canvas&lt;/canvas&gt;
      &lt;br /&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Image Data&lt;/legend&gt;
        &lt;textarea id="imageString"&gt;&lt;/textarea&gt;
  
        &lt;img id="imageOutput" src="" /&gt;
      &lt;/fieldset&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know the image isn't actually loaded from the <code>&lt;input type='file' /&gt;</code>, but I figured it was worth a shot. In Chrome console I get: </p>
  
  <blockquote>
    <p>Not allowed to load local resource</p>
  </blockquote>
  
  <p>Is there any way for me to get images from my iPad into a canvas element?</p>
  
  <p>Any help, tips or advice is greatly appreciated! Thanks!</p>