html5 如何将摄像头拍下的图片下载到本地

Posted 2023-03-15

我用video调用了电脑的摄像头，然后截图显示在网页中的canvas中，请问如何将该图片保存到本地电脑。

首先你canvas已经有图了

然后通过ajax发给后台 然后后台做保存

js:

    var data = _canvas.toDataURL(); 
    //删除字符串前的提示信息 "data:image/png;base64,"  
    var b64 = data.substring(22);  
  
    $.ajax( url: "RotateCanvas.aspx", data:  data: b64, name: i.toString() , success:  
            function ()  
              
              alert('OK');  
              
    );

java:

if (Request["name"] != null)  
  
    string name = Request["name"];  
    String savePath = Server.MapPath("~/images/output/");  
  
    try  
      
        FileStream fs = File.Create(savePath + "/" + name + ".png");  
        byte[] bytes = Convert.FromBase64String(Request["data"]);  
  
        fs.Write(bytes, 0, bytes.Length);  
        fs.Close();  
      
    catch (Exception ex)  
      
      

追问

function cut() var videoElement。。
var canvasObj 。。
。。drawImage(videoElement, 0, 0, 320, 240);
这是我的截图函数，请问你提供的代码放在哪里？

追答

你看你保存是想怎么触发

自动保存就放drawImage(videoElement, 0, 0, 320, 240); 后面

 function cut() var videoElement。。
  var canvasObj  。。
。。drawImage(videoElement, 0, 0, 320, 240);  
   
   var data = canvasObj.toDataURL(); 
    //删除字符串前的提示信息 "data:image/png;base64,"  
    var b64 = data.substring(22);  
   
    $.ajax( url: "RotateCanvas.aspx", data:  data: b64, name: i.toString() , success:  
            function ()  
              
              alert('OK');  
              
    );

参考技术A 首先你canvas已经有图了
然后通过ajax发给后台
然后后台做保存
js:
12345678910 var data = _canvas.toDataURL(); //删除字符串前的提示信息 "data:image/png;base64," var b64 = data.substring(22); $.ajax( url: "RotateCanvas.aspx", data: data: b64, name: i.toString() , success: function () alert('OK'); );
java:
1234567891011121314151617if (Request["name"] != null) string name = Request["name"]; String savePath = Server.MapPath("~/images/output/"); try FileStream fs = File.Create(savePath + "/" + name + ".png"); byte[] bytes = Convert.FromBase64String(Request["data"]); fs.Write(bytes, 0, bytes.Length); fs.Close(); catch (Exception ex) 参考技术B 看得见吗？？看得见直接用QQ截图不就行了？ 看不见用浏览器缓存的办法 ！ 你说的是图片吧 应该不是动态的..