javascript - Can I load a local file into an html canvas element?

Question

Welcome To Ask or Share your Answers For Others

javascript - Can I load a local file into an html canvas element?

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Can I load a local file into an html canvas element?

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

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-17T00:32:32+0000

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:

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

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):

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;
```

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

Categories

javascript - Can I load a local file into an html canvas element?

javascript - Can I load a local file into an html canvas element?

JSFiddle

Code

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags