1.設定好拍照背景，如使用紅布或者藍布等等，白牆也可以。
2.選擇高清的網路攝影機，如羅技等高清網路攝影機，支援的解析度越高越好。
3.使用ImageCapOnWeb處理拍照。
4.調用控制項的start方法開始擷取網路攝影機視頻
5.調用cap()方法拍照
6.調用selectRect方法選中頭像地區,不滿意的話可以手動微調。
7.調用cutSelected方法裁剪使用選中地區
8.儲存拍照結果。
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>控制項測試頁面</title><script type="text/javascript">function startCam(){var capActivexObject=document.getElementById('cap1');//啟動網路攝影機capActivexObject.start();}function capPicture1(){var capActivexObject=document.getElementById('cap1');capActivexObject.cap(); //控制網路攝影機拍照}function selectPic(){var capActivexObject=document.getElementById('cap1');capActivexObject.selectRect(0.3,0.25,0.6,0.8);//具體含義請查看文檔}function cutSelectedPic(){var capActivexObject=document.getElementById('cap1');capActivexObject.cutSelected();}function submitToServer(){//讀取控制項的拍照結果到hidden輸入項中var base64_data1 = document.getElementById('cap1').jpegBase64Data;if (base64_data1.length==0) {alert('請先拍照!');return false;}document.getElementById('picData1').value=base64_data1;document.getElementById('picExt1').value='.jpg';/*注意不同的伺服器端技術要配置不同的接收資料的url,可以參考submit.html的示如asp.net的程式員可以查看submit.aspx，php程式員可以查看submit.php，asp程式員可以查看submit.asp*///document.forms[0].action="http://localhost:8080/pages/submit.jsp";alert('請先開啟demo6.html設定管理員端程式參數再繼續測試!');return false;document.forms[0].submit();}</script></head><body><form method="post" ><input type="hidden" id="picData1" name="picData1"/><input type="hidden" id="picExt1" name="picExt1"/><input type="hidden" id="picData2" name="picData2"/><input type="hidden" id="picExt2" name="picExt2"/><p><input type="button" value="啟動網路攝影機" onclick="javascript:startCam();" /><input type="button" value="拍照片" onclick="javascript:capPicture1();" /><input type="button" value="選中頭像地區" onclick="javascript:selectPic();" /><input type="button" value="裁剪選中地區" onclick="javascript:cutSelectedPic()" /><input type="button" value="提交到伺服器端" onclick="javascript:submitToServer();" /> <br/><input type="button" value="清除結果" onclick="javascript:document.getElementById('cap1').clear();" /></p><object classid="clsid:34681DB3-58E6-4512-86F2-9477F1A9F3D8" id="cap1" width="640" height="480" codebase="../cabs/ImageCapOnWeb.cab#version=2,0,0,0"><param name="Visible" value="0"><param name="AutoScroll" value="0"><param name="AutoSize" value="0"><param name="AxBorderStyle" value="1"><param name="Caption" value="scaner"><param name="Color" value="4278190095"><param name="Font" value="宋體"><param name="KeyPreview" value="0"><param name="PixelsPerInch" value="96"><param name="PrintScale" value="1"><param name="Scaled" value="-1"><param name="DropTarget" value="0"><param name="HelpFile" value><param name="PopupMode" value="0"><param name="ScreenSnap" value="0"><param name="SnapBuffer" value="10"><param name="DockSite" value="0"><param name="DoubleBuffered" value="0"><param name="ParentDoubleBuffered" value="0"><param name="UseDockManager" value="0"><param name="Enabled" value="-1"><param name="AlignWithMargins" value="0"><param name="ParentCustomHint" value="-1"><param name="licenseMode" value="2"><param name="key1" value=""><param name="key2" value=""></object></form><script type="text/javascript">document.all.cap1.SwitchWatchOnly(); //切換到只顯示網路攝影機畫面形式，隱藏編輯按鈕等表徵圖.</script></body></html>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*,java.io.*" errorPage="" %><%String savePath=config.getServletContext().getRealPath("/")+"//";File tmp_path=new File(savePath);tmp_path.mkdirs();System.out.println("照片資料儲存路徑:"+savePath);String pic_base_64_data=request.getParameter("picData");//如果下面的代碼輸出true則說明需要調整伺服器軟體工作參數，解決接受post資料的大小限制問題,例如//tomcat的話需要在server.xml中配置maxPostSize="0"來解除上傳資料的大小限制 <Connector port="8080" protocol="HTTP/1.1" // connectionTimeout="20000" // redirectPort="8443" maxPostSize="0"/>// System.out.println(null==pic_base_64_data);System.out.println("base64 string length:"+pic_base_64_data.length());String fileFormat=request.getParameter("picExt");sun.misc.BASE64Decoder decode=new sun.misc.BASE64Decoder();byte[] datas=decode.decodeBuffer(pic_base_64_data);String filename=String.valueOf(System.currentTimeMillis())+fileFormat;File file=new File(savePath+filename);OutputStream fos=new FileOutputStream(file);System.out.println("圖片檔案名稱:"+filename);fos.write(datas);fos.close();out.print("<a href='" + request.getContextPath()+"/"+ filename + "'>click here</a>");out.flush();out.close();%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
