Question

我一直在这个网站上搜索这个问题的答案，但我似乎找不到任何答案。所以我想让客户端提供一个图像加载到画布中以便处理，就是它。所以我不想将它保存在服务器上或云上，但我只是想将图像复制到HTML5 Canvas中进行处理。有没有办法在没有实际保存文件的情况下做到这一点？

Answer 1

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

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

 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
   }
 }

将客户端的图像加载到画布中

1 个答案: