如何将图像上传到 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/指南/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屋！