保存文件夹上本地计算机上的摄像头捕获的图像

I am using HTML5 inputs to take a picture from camera using below line,

我正在使用HTML5输入从相机拍摄照片,

<input id="cameraInput" type="file" accept="image/*;capture=camera"></input>

and getting used image in blob:, using following javascript,

并在blob中使用图像:,使用以下javascript,

var mobileCameraImage = function() {
    var that = this
        ;
      $("#cameraInput").on("change", that.sendMobileImage);
      if (!("url" in window) && ("webkitURL" in window)) {
        window.URL = window.webkitURL;
      }
});

var sendMobileImage = function( event ) {
    var that = this;
      if (event.target.files.length == 1 && event.target.files[0].type.indexOf("image/") == 0) {
          var capturedImage = URL.createObjectURL(event.target.files[0])
              ;

          alert( capturedImage );
      }
});

Here, I am getting proper image url but the problem i am facing is to send this image url to the server, After reading blogs i found i can not send Blob: url to the server due to its local instance. Does anyone can help to save the clicked image on local machine on a folder or any where, or to help how i can send this image url to the server.

在这里,我正在获得正确的图像网址,但我面临的问题是将此图像网址发送到服务器,在阅读博客后,我发现由于其本地实例,我无法将Blob:url发送到服务器。有没有人可以帮助将本地计算机上的点击图像保存在文件夹或任何位置,或者帮助我如何将此图像URL发送到服务器。

Thanks in advance.

提前致谢。

1 个解决方案

#1

You may need to submit your form every time via Ajax or you may upload the image data manually. In order to do that, you may draw the image unto a canvas, then obtain the canvas data.

您可能需要每次通过Ajax提交表单,或者您可以手动上传图像数据。为此,您可以将图像绘制到画布上,然后获取画布数据。

// create an image to receive the data
var img = $('<img>');

// create a canvas to receive the image URL
var canvas = $('<canvas>');
var ctx = canvas[0].getContext("2d");

$("#cameraInput").on("change", function () {
  var capturedImage = URL.createObjectURL(this.files[0]);

  img.attr('src', capturedImage);
  ctx.drawImage(img);

  var imageData = canvas[0].toDataURL("image/png");

  // do something with the image data    
});

Or use a FileReader

或者使用FileReader

// only need to create this once
var reader = new FileReader();
reader.onload = function () {
  var imageData = reader.result;

  // do something with the image data
};

$("#cameraInput").on("change", function () {
  reader.readAsDataURL(this.files[0]);
});

Then you can upload that data to the server.

然后,您可以将该数据上载到服务器。

#1