html5如何上傳圖片到服務(wù)器

直接用ftp工具，將你.html或者.htm結(jié)尾的文件放到服務(wù)器的運(yùn)行目錄

創(chuàng)新互聯(lián)是專業(yè)的梓潼網(wǎng)站建設(shè)公司，梓潼接單;提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行梓潼網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

然后通過(guò)你的網(wǎng)站/html名字.html。

html5 圖片上傳 可收縮 拖拽

可以參考chrome小樂(lè)圖客擴(kuò)展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網(wǎng)址上傳，是通過(guò)html5 file reader實(shí)現(xiàn)的。

怎么用html5或js調(diào)用手機(jī)的攝像頭拍照上傳以及調(diào)用手機(jī)相冊(cè)選取照片

1、實(shí)現(xiàn)頭的方法代碼。

2、編寫CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測(cè)試結(jié)果如下。

注意事項(xiàng)：

JavaScript是一種網(wǎng)絡(luò)腳本語(yǔ)言，在web應(yīng)用開發(fā)中得到了廣泛的應(yīng)用，它經(jīng)常被用來(lái)為網(wǎng)頁(yè)添加各種動(dòng)態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來(lái)實(shí)現(xiàn)自己的功能。

如何使用HTML5實(shí)現(xiàn)利用攝像頭拍照上傳功能

1、 視頻流

HTML5 的 The Media Capture（媒體捕捉） API 提供了對(duì)攝像頭的可編程訪問(wèn)，用戶可以直接用

getUserMedia（請(qǐng)注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個(gè)HTML5 的 Video

標(biāo)簽，并將從攝像頭獲得的視頻作為這個(gè)標(biāo)簽的輸入來(lái)源。

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)然你也可以直接在此寫一個(gè)匿名函數(shù)

}

function success(stream){

video_element.src=stream;

}

此時(shí)，video 標(biāo)簽內(nèi)將顯示動(dòng)態(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’); //動(dòng)態(tài)創(chuàng)建畫布對(duì)象

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對(duì)象內(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變量就存儲(chǔ)了一長(zhǎng)串的字符數(shù)據(jù)內(nèi)容，表示的就是一個(gè)PNG圖像的base64編碼。因?yàn)檎嬲膱D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分，所以要讓實(shí)際服務(wù)器收的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來(lái)獲取。

第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：

var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：

var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語(yǔ)言截取22位以后的字符串（也就是在前臺(tái)略過(guò)上面這步直接上傳）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、 圖片上傳

在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)可以用：

$.post(‘upload.php’,{‘data’:data});

在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。

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);

}

PHP、HTML5上傳圖片自動(dòng)壓縮問(wèn)題

給你個(gè)圖片處理的類吧，圖片剪裁處理后，也就等于將圖片壓縮了。

/**

*?圖像處理類

*?============================================================================

*?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';

}

/**

*?檢測(cè)是否為圖像文件

*?@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:

//縮略圖尺寸不變，自動(dòng)裁切圖片

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縮略圖尺寸不變，自動(dòng)裁切最大邊

*?@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);?//儲(chǔ)存透明通道

}

//繪制縮略圖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;

}

}

Html5移動(dòng)端上傳圖片并裁剪 - Clipic.js

Clipic.js插件可以為移動(dòng)端 (僅支持移動(dòng)端) 提供頭像上傳并裁剪成指定尺寸，用原生js開發(fā)的，輕量級(jí)，包含html跟css，不到8kb。點(diǎn)此鏈接體驗(yàn)：

參數(shù)說(shuō)明

width:Number (默認(rèn)：500) – 裁剪寬度

height:Number (默認(rèn)：500) – 裁剪高度

ratio:Number (可選) – 裁剪的比例，當(dāng)傳入ratio時(shí)width/height將無(wú)效

src:String (必傳) – 需要裁剪的圖片，可以是圖片鏈接，或者 base64

type:String (默認(rèn)：jpeg) – 裁剪后圖片的類型，僅支持 jpeg/png 兩種

quality:Number (默認(rèn)：0.9) – 壓縮質(zhì)量

buttonText:Array (默認(rèn)：[‘取消’, ‘重置’, ‘完成’]) – 底部三個(gè)按鈕文本

標(biāo)題名稱：html5上傳圖片,html5上傳圖片數(shù)據(jù)庫(kù)
當(dāng)前鏈接：http://chinadenli.net/article37/dsehopj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站導(dǎo)航、Google、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)