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!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
