Menu
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
<!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!
290
According to the HTML specification you can't access the elements of the Canvas. You can get its context, and draw in it manipulate it, but that is all. BUT, you can put both the Canvas and the html element in the same div with a a position: relative and then set the canvas and the other element to position: absolute .
HTML inside of canvas is not possible.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
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:
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 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):
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; 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 If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
