如何将图像上传到HTML5画布

Question

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

Answer 1

我认为你的意思是,将图像加载到画布中而不是从画布上传图像.

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

但基本上你想要做的是在javascript中创建一个图像,并将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

一个不需要FileReader*,最好使用URL.createObjectURL方法,它将直接创建一个符号链接到磁盘上的文件.这将减少内存使用量,并且只有一个异步事件可以等待(其中一个img.onload),这将带来额外的好处.

document.getElementById('inp').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
  var canvas = document.getElementById('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0,0);
}
function failed() {
  console.error("The provided file couldn't be loaded as an Image media");
}

<input type="file" id="inp">
<canvas id="canvas"></canvas>

^{*IIRC只有少数版本的Chrome确实支持FileReader而尚未支持URL.createObejctURL,所以如果您定位这些版本,则可能需要FileReader.}