我可以将本地文件加载到HTML canvas元素中吗？ [英] Can I load a local file into an html canvas element?
问题描述
我的目标是让iPad上的用户将一张图片加载到画布中，然后将所有base 64编码的图片加入 OFFLINE
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
<!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>
我知道图片实际上并未从<输入类型='file'/> ，但我认为值得一试。在Chrome控制台中，我得到：
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
我有什么方法可以将我的iPad上的图像转换为画布元素吗？
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!
推荐答案
我有一个功能小提琴（基于以前的工作这个答案），演示如何使用文件输入上传图片，将其放在画布中，然后读取base64数据网址。
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.
简而言之，您应该：
-
使用文件API读取图片（您可以在
onchange输入元素的监听器）：
Use the File API to read in the image (you might do this in an
onchangelistener 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
在FileReader的 onload 回调（此处为 createImage ），读取FileReader的结果（此处为 fr.result ）。这是您的图片数据网址！
In your FileReader's onload callback (here, createImage), read the result of the FileReader (here, fr.result). That's your image data URL!
可选步骤画布上的图像）：
-
在FileReader的
onload回调（此处为createImage），创建一个新的Image对象并设置其src到FileReader的结果：
In your FileReader's
onloadcallback (here,createImage), make a newImageobject and set itssrcto theresultof the FileReader:
img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
最后，在你的Image的 onload callback，将其绘制到画布上，然后使用 canvas.toDataUrl 添加数据：
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
这篇关于我可以将本地文件加载到HTML canvas元素中吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
