可以參考chrome小樂圖客擴(kuò)展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網(wǎng)址上傳，是通過html5 file reader實(shí)現(xiàn)的。
創(chuàng)新互聯(lián)建站主營臨縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),臨縣h5成都小程序開發(fā)搭建,臨縣網(wǎng)站營銷推廣歡迎臨縣等地區(qū)企業(yè)咨詢
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用
getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video
標(biāo)簽，并將從攝像頭獲得的視頻作為這個標(biāo)簽的輸入來源。
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera應(yīng)使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回調(diào)函數(shù),當(dāng)然你也可以直接在此寫一個匿名函數(shù)
}
function success(stream){
video_element.src=stream;
}
此時(shí)，video 標(biāo)簽內(nèi)將顯示動態(tài)的攝像視頻流。下面需要進(jìn)行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，因?yàn)閂ideo元素可以作為Canvas圖像的輸入，所以這一點(diǎn)很好實(shí)現(xiàn)。主要代碼如下：
var canvas=document.createElement(‘canvas’); //動態(tài)創(chuàng)建畫布對象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內(nèi)指定的區(qū)域捕捉繪制到畫布上指定的區(qū)域，可進(jìn)行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數(shù)據(jù)的核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
這樣，imgData變量就存儲了一長串的字符數(shù)據(jù)內(nèi)容，表示的就是一個PNG圖像的base64編碼。因?yàn)檎嬲膱D像數(shù)據(jù)是base64編碼逗號之后的部分，所以要讓實(shí)際服務(wù)器收的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺語言截取22位以后的字符串（也就是在前臺略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時(shí)可以用：
$.post(‘upload.php’,{‘data’:data});
在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
給你個圖片處理的類吧，圖片剪裁處理后，也就等于將圖片壓縮了。
/**
*?圖像處理類
*?============================================================================
*?Copyright?2014?大秦科技，并保留所有權(quán)利。
*?網(wǎng)站地址:?；
*?============================================================================
*/
class?Image{
//生成縮略圖的方式
public?$thumbType;
//縮略圖的寬度
public?$thumbWidth;
//縮略圖的高度
public?$thumbHeight;
//生成縮略圖文件名后綴
public?$thumbEndFix;
//縮略圖文件前綴
public?$thumbPreFix;
/**
*?構(gòu)造函數(shù)
*/
public?function?__construct(){
$this-thumbType?=?1;
$this-thumbWidth?=?120;
$this-thumbHeight?=?60;
$this-thumbPreFix?='';
$this-thumbEndFix?=??'_thumb';
}
/**
*?檢測是否為圖像文件
*?@param?$img?圖像
*?@return?bool
*/
private?function?check($img){
$type?=?array(".jpg",?".jpeg",?".png",?".gif");
$imgType?=?strtolower(strrchr($img,?'.'));
return?extension_loaded('gd')??file_exists($img)??in_array($imgType,?$type);
}
/**
*?獲得縮略圖的尺寸信息
*?@param?$imgWidth?原圖寬度
*?@param?$imgHeight?原圖高度
*?@param?$thumbWidth?縮略圖寬度
*?@param?$thumbHeight?縮略圖的高度
*?@param?$thumbType?處理方式
*?1?固定寬度??高度自增?2固定高度??寬度自增?3固定寬度??高度裁切
*?4?固定高度?寬度裁切?5縮放最大邊?原圖不裁切
*?@return?mixed
*/
private?function?thumbSize($imgWidth,?$imgHeight,?$thumbWidth,?$thumbHeight,?$thumbType){
//初始化縮略圖尺寸
$w?=?$thumbWidth;
$h?=?$thumbHeight;
//初始化原圖尺寸
$cuthumbWidth?=?$imgWidth;
$cuthumbHeight?=?$imgHeight;
switch?($thumbType)?{
case?1?:
//固定寬度??高度自增
$h?=?$thumbWidth?/?$imgWidth?*?$imgHeight;
break;
case?2?:
//固定高度??寬度自增
$w?=?$thumbHeight?/?$imgHeight?*?$imgWidth;
break;
case?3?:
//固定寬度??高度裁切
$cuthumbHeight?=?$imgWidth?/?$thumbWidth?*?$thumbHeight;
break;
case?4?:
//固定高度??寬度裁切
$cuthumbWidth?=?$imgHeight?/?$thumbHeight?*?$thumbWidth;
break;
case?5?:
//縮放最大邊?原圖不裁切
if?(($imgWidth?/?$thumbWidth)??($imgHeight?/?$thumbHeight))?{
$h?=?$thumbWidth?/?$imgWidth?*?$imgHeight;
}?elseif?(($imgWidth?/?$thumbWidth)??($imgHeight?/?$thumbHeight))?{
$w?=?$thumbHeight?/?$imgHeight?*?$imgWidth;
}?else?{
$w?=?$thumbWidth;
$h?=?$thumbHeight;
}
break;
default:
//縮略圖尺寸不變，自動裁切圖片
if?(($imgHeight?/?$thumbHeight)??($imgWidth?/?$thumbWidth))?{
$cuthumbWidth?=?$imgHeight?/?$thumbHeight?*?$thumbWidth;
}?elseif?(($imgHeight?/?$thumbHeight)??($imgWidth?/?$thumbWidth))?{
$cuthumbHeight?=?$imgWidth?/?$thumbWidth?*?$thumbHeight;
}
//????????????}
}
$arr?[0]?=?$w;
$arr?[1]?=?$h;
$arr?[2]?=?$cuthumbWidth;
$arr?[3]?=?$cuthumbHeight;
return?$arr;
}
/**
*?圖片裁切處理
*?@param?$img?原圖
*?@param?string?$outFile?另存文件名
*?@param?string?$thumbWidth?縮略圖寬度
*?@param?string?$thumbHeight?縮略圖高度
*?@param?string?$thumbType?裁切圖片的方式
*?1?固定寬度??高度自增?2固定高度??寬度自增?3固定寬度??高度裁切
*?4?固定高度?寬度裁切?5縮放最大邊?原圖不裁切?6縮略圖尺寸不變，自動裁切最大邊
*?@return?bool|string
*/
public?function?thumb($img,?$outFile?=?'',?$thumbWidth?=?'',?$thumbHeight?=?'',?$thumbType?=?''){
if?(!$this-check($img))?{
return?false;
}
//基礎(chǔ)配置
$thumbType?=?$thumbType???$thumbType?:?$this-thumbType;
$thumbWidth?=?$thumbWidth???$thumbWidth?:?$this-thumbWidth;
$thumbHeight?=?$thumbHeight???$thumbHeight?:?$this-thumbHeight;
//獲得圖像信息
$imgInfo?=?getimagesize($img);
$imgWidth?=?$imgInfo?[0];
$imgHeight?=?$imgInfo?[1];
$imgType?=?image_type_to_extension($imgInfo?[2]);
//獲得相關(guān)尺寸
$thumb_size?=?$this-thumbSize($imgWidth,?$imgHeight,?$thumbWidth,?$thumbHeight,?$thumbType);
//原始圖像資源
$func?=?"imagecreatefrom"?.?substr($imgType,?1);
$resImg?=?$func($img);
//縮略圖的資源
if?($imgType?==?'.gif')?{
$res_thumb?=?imagecreate($thumb_size?[0],?$thumb_size?[1]);
$color?=?imagecolorallocate($res_thumb,?255,?0,?0);
}?else?{
$res_thumb?=?imagecreatetruecolor($thumb_size?[0],?$thumb_size?[1]);
imagealphablending($res_thumb,?false);?//關(guān)閉混色
imagesavealpha($res_thumb,?true);?//儲存透明通道
}
//繪制縮略圖X
if?(function_exists("imagecopyresampled"))?{
imagecopyresampled($res_thumb,?$resImg,?0,?0,?0,?0,?$thumb_size?[0],?$thumb_size?[1],?$thumb_size?[2],?$thumb_size?[3]);
}?else?{
imagecopyresized($res_thumb,?$resImg,?0,?0,?0,?0,?$thumb_size?[0],?$thumb_size?[1],?$thumb_size?[2],?$thumb_size?[3]);
}
//處理透明色
if?($imgType?==?'.gif')?{
imagecolortransparent($res_thumb,?$color);
}
//配置輸出文件名
$imgInfo?=?pathinfo($img);
$outFile?=?$outFile???$outFile?:dirname($img).'/'.?$this-thumbPreFix?.?$imgInfo['filename']?.?$this-thumbEndFix?.?"."?.?$imgInfo['extension'];
Files::create(dirname($outFile));
$func?=?"image"?.?substr($imgType,?1);
$func($res_thumb,?$outFile);
if?(isset($resImg))
imagedestroy($resImg);
if?(isset($res_thumb))
imagedestroy($res_thumb);
return?$outFile;
}
}
直接用ftp工具，將你.html或者.htm結(jié)尾的文件放到服務(wù)器的運(yùn)行目錄
然后通過你的網(wǎng)站/html名字.html。
重慶分公司
重慶分公司
