如何将图像上传到HTML5画布

Question

我目前正在使用 http://paperjs.org 创建HTML5画布绘图应用程序。我想让用户将图像上传到画布中。我知道我需要进行登录和注册，但是有更简单的方法吗？我已经看到HTML5拖放式上传。

Answer 1

我假设您的意思是将图像加载到画布中，而不是从画布上载图像。

在这里阅读他们所有的画布文章可能是一个好主意

但基本上，您要做的是在javascript中创建图片，然后将image.src=设置为任何文件位置。在从用户端加载图像的情况下，您将要使用文件系统API。

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]);     
}