如何将图像上传到HTML5canvas

我目前正在使用http://paper.s.js创build一个HTML5canvas绘图应用程序。 我想让用户上传图片到canvas上。 我知道我需要做一个login和注册，但有一个更简单的方法吗？ 我已经看到了HTML5的拖放上传。

Answer 1

我假定你的意思是，将图像加载到canvas上，而不是从canvas上载图像。

这可能是一个好主意，通读他们已经在这里的所有canvas文章https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

但基本上你想要做的就是在JavaScript中创build一个图像，并将image.src =设置为任何文件位置。 在加载用户的图像的情况下，您将要使用文件系统API。

在这里举一个简单的例子： 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]); } 

Answer 2

 <script> window.onload = function() { var canvas=document.getElementById(“drawing”); // grabs the canvas element var context=canvas.getContext(“2d”); // returns the 2d context object var img=new Image() //creates a variable for a new image img.src= “images/vft.jpg” // specifies the location of the image context.drawImage(img,20,20); // draws the image at the specified x and y location } </script> 

检查演示