Javascript 如何将图像上传到 HTML5 画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10906734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload image into HTML5 canvas
提问by user1438026
I am currently using http://paperjs.orgto 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.
我目前正在使用http://paperjs.org创建一个 HTML5 画布绘图应用程序。我想让用户将图像上传到画布中。我知道我需要登录和注册，但有没有更简单的方法？我已经看到了 HTML5 拖放上传。
回答by DerekR
I assume you mean, to load an image into the canvas and not uploading the image from the canvas.
我假设您的意思是将图像加载到画布中而不是从画布上传图像。
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
通读他们在这里的所有画布文章可能是个好主意 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
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.
但基本上你想要做的是在 javascript 中创建一个图像，并将 image.src = 设置为任何文件位置。在从用户端加载图像的情况下，您将需要使用文件系统 API。
Threw together a brief example here: http://jsfiddle.net/influenztial/qy7h5/
在这里举一个简单的例子：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]);
}
回答by Kaiido
One doesn't need a FileReader*, it is better to use the URL.createObjectURLmethod, which will create a symlink directly to the File on disk. This will incur less memory usage, and will have the added benefit to have only one async event to wait for (the one of the img.onload).
不需要 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 only a few versions of Chrome did support FileReader while not yet supporting URL.createObejctURL, so if you target these very versions, you might need FileReader..
*IIRC 只有几个版本的 Chrome 确实支持 FileReader 而还不支持 URL.createObejctURL，所以如果你针对这些版本，你可能需要 FileReader..
回答by harikrishnan.n0077
<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>
Check Demo
检查演示
