如何将图像上传到HTML5画布 [英] How to upload image into HTML5 canvas
问题描述
我目前正在使用 http://paperjs.org 创建HTML5画布绘图应用。我想让用户将图像上传到画布。我知道我需要进行登录和注册,但有更简单的方法吗?我已经看到了HTML5的拖放上传功能。
I am currently using http://paperjs.org to create an HTML5 canvas drawing app. I want to let users upload images into the canvas. I know I need to make a login and signup but is there an easier way? I have seen the HTML5 drag and drop upload.
推荐答案
我假设你的意思是,要将图像加载到画布中而不是上传图片来自画布。
I assume you mean, to load an image into the canvas and not uploading the image from the canvas.
阅读他们在这里的所有画布文章可能是个好主意
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/ Using_images
It'd probably be a good idea to read through all the canvas articles they have over here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
但基本上你想要做的是用javascript创建一个图像,并将image.src =设置为任何文件位置。在用户端加载图片的情况下,您将要使用文件系统API。
But basically what you want to do is create an image in javascript, and set the image.src = to whatever the file location is. In the case of loading images from the user on their end, you're going to want to use the File System API.
在这里举个简单的例子: http://jsfiddle.net/influenztial/qy7h5/
Threw together a brief example here: http://jsfiddle.net/influenztial/qy7h5/
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
这篇关于如何将图像上传到HTML5画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!