将客户端的图像加载到画布中 [英] Loading client's images into a canvas

问题描述

我一直在这个网站上搜索这个问题的答案，但我似乎找不到任何。因此，我希望客户端提供要加载到画布中处理的图片，。所以我不想把它保存在服务器或云上，但我只是想把图像复制到一个HTML5画布进行处理。有没有办法，我可以做，而不实际保存文件？

I have been searching this website for answers to this question, but I couldn't seem to find any. So I want to have the client provide an image to be loaded into a canvas for processing and that's it. So I don't want to save it on the server or on a cloud, but I just want to copy the image to an HTML5 Canvas to be processed from there. Is there a way I can do that without actually saving the file?

推荐答案

我不知道我是否明白你的问题。您希望用户可以从客户端打开图像，并将其加载到html5画布中。正确？

I'm not sure if I understand your question. You want that the user can open an image from the client and you load it into a html5 canvas. correct?

如果是这样：您可以使用类型文件的输入字段。在您的代码中，您使用URL.createObjectUrl从本地选择的图像创建对象网址。使用Image可以加载图像，并在onload事件中将其绘制到画布上。

If so: you can use an input field of type file. In your code you use URL.createObjectUrl to create object urls from the local selected images. With "Image" you can load the image and in the onload event you draw it to the canvas.

 var file = document.getElementById('file'); // the input element of type file
 file.onchange = function(e) {
   var ctx = document.getElementById('canvas').getContext('2d'); // load context of canvas
   var img = new Image();
   img.src = URL.createObjectURL(e.target.files[0]); // use first selected image from input element
   img.onload = function() {
     ctx.drawImage(img, 0, 0); // draw the image to the canvas
   }
 }

这篇关于将客户端的图像加载到画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！