我的目标是让 iPad 上的用户将图像加载到 Canvas 中，然后在离线
时获取 base 64 编码的所述图像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>
我知道图像实际上不是从 <input type='file' /> 加载的, 但我认为值得一试。在 Chrome 控制台中，我得到:
Not allowed to load local resource
有什么方法可以将我的 iPad 中的图像放入 Canvas 元素中吗？
非常感谢任何帮助、提示或建议!谢谢!
最佳答案
我有一个 functioning fiddle (基于 this answer 之前的工作)演示了如何使用文件输入上传图像，将其放置在 Canvas 中，然后读回 base64 数据 URL。
简而言之，你应该:
- 使用File API读取图像(您可以在输入元素的
onchange监听器中执行此操作):
var file = input.files[0];
var fr = new FileReader();
fr.onload = createImage; // onload fires after reading is complete
fr.readAsDataURL(file); // begin reading
- 在您的 FileReader 的
onload回调(此处为createImage)中，读取 FileReader 的result(此处为fr.result)。那是你的图像数据 URL!
可选步骤(仅当您计划在 Canvas 上操作图像时才需要):
- 在你的 FileReader 的
onload回调中(这里是createImage)，创建一个新的Image对象并设置它的src到 FileReader 的结果:
img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
- 最后，在图像的
onload回调中，将其绘制到 Canvas 上，然后使用canvas.toDataUrl处理数据:
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
关于javascript - 我可以将本地文件加载到 html canvas 元素中吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13938686/