Home/ Questions/Q 9052229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:06:53+00:00

My goal is to have users on iPad load an image into a canvas,

  • 0

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 OFFLINE

JSFiddle

JSFiddle

Code

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../js/libs/jquery-1.7.1.min.js"></script>
    <script>
      $(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
    </script>
  </head>

  <body>
    <form>
      <input type="file" name="testImg" id="testImg" />
    </form>
    <button id="testButton">Test</button>
    <canvas id="testCanvas" style="border: 1px solid black;">Your Browser does not support canvas</canvas>
    <br />
    <fieldset>
      <legend>Image Data</legend>
      <textarea id="imageString"></textarea>

      <img id="imageOutput" src="" />
    </fieldset>
  </body>
</html>

I know the image isn’t actually loaded from the <input type='file' />, but I figured it was worth a shot. In Chrome console I get:

Not allowed to load local resource

Is there any way for me to get images from my iPad into a canvas element?

Any help, tips or advice is greatly appreciated! Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have a functioning fiddle (based on the prior work of this answer) that demonstrates how to upload an image using a file input, place it inside a canvas, and read the base64 data URL back out.

    In short, you should:

    1. Use the File API to read in the image (you might do this in an onchange listener of the input element):
    var file = input.files[0];
var fr = new FileReader();
fr.onload = createImage;   // onload fires after reading is complete
fr.readAsDataURL(file);    // begin reading
    1. In your FileReader’s onload callback (here, createImage), read the result of the FileReader (here, fr.result). That’s your image data URL!

    OPTIONAL STEPS (only needed if you plan to manipulate the images on a canvas):

    1. In your FileReader’s onload callback (here, createImage), make a new Image object and set its src to the result of the FileReader:
    img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
    1. Finally, in your Image’s onload callback, draw it to the canvas and then use canvas.toDataUrl to the data:
    canvas.width = img.width;      // set canvas size big enough for the image
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);         // draw the image

// do some manipulations...

canvas.toDataURL("image/png");  // get the data URL
    • 0