html5壓縮圖片大小

① 怎樣壓縮圖片文件體積大小

你可以用這種在線的圖片壓縮工具，就可以把圖片文件壓縮到你期望的體積大小，比如你將壓縮數值設置到100kb，稍等幾秒鍾之後，在線圖片壓縮工具就已經把圖片的文件大小壓縮到最高100kb了。換句話說，你設定壓縮到多少kb的期望值，他壓縮完的輸出圖片就是多少kb大小了，非常方便。在線智能圖片壓縮,壓縮圖片體積大小,JPG|PNG大圖壓縮

在線圖片智能壓縮使用步驟：

一、首先點擊加號添加需要壓縮的圖片。目前已知支持對jpg、png、webp、bmp等多種常見的圖片格式進行壓縮，如果選擇圖片後正常顯示並能夠壓縮成功，則代表支持該圖片格式。
二、可以自行修改圖片需要被壓縮到的最大寬高尺寸，默認為圖片原始的寬高尺寸，並且寬高比例是自動鎖定的，確保圖片不會變形。
三、必須設置圖片被壓縮後，期望輸出的壓縮之後圖片文件的最大佔用空間，該選項是必填的。
四、選擇圖片壓縮的演算法。默認為智能混合壓縮演算法，絕大多數情況下使用默認演算法進行圖片壓縮即可。
五、當你設置壓縮後的大小單位為」Kb「時，壓縮大小的設定值不能小於1Kb，但圖片壓縮後的最終文件大小是可以小於1Kb的。

② php、HTML5上傳圖片自動壓縮問題

給你個圖片處理的類吧，圖片剪裁處理後，也就等於將圖片壓縮了。

/**
*圖像處理類
*============================================================================
*Copyright2014大秦科技，並保留所有權利。
*網站地址:http://www.qintech.net；
*============================================================================
*/
classImage{

//生成縮略圖的方式
public$thumbType;
//縮略圖的寬度
public$thumbWidth;
//縮略圖的高度
public$thumbHeight;
//生成縮略圖文件名後綴
public$thumbEndFix;
//縮略圖文件前綴
public$thumbPreFix;

/**
*構造函數
*/
publicfunction__construct(){
$this->thumbType=1;
$this->thumbWidth=120;
$this->thumbHeight=60;
$this->thumbPreFix='';
$this->thumbEndFix='_thumb';
}

/**
*檢測是否為圖像文件
*@param$img圖像
*@returnbool
*/
privatefunctioncheck($img){
$type=array(".jpg",".jpeg",".png",".gif");
$imgType=strtolower(strrchr($img,'.'));
returnextension_loaded('gd')&&file_exists($img)&&in_array($imgType,$type);
}

/**
*獲得縮略圖的尺寸信息
*@param$imgWidth原圖寬度
*@param$imgHeight原圖高度
*@param$thumbWidth縮略圖寬度
*@param$thumbHeight縮略圖的高度
*@param$thumbType處理方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切
*@returnmixed
*/
privatefunctionthumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType){
//初始化縮略圖尺寸
$w=$thumbWidth;
$h=$thumbHeight;
//初始化原圖尺寸
$cuthumbWidth=$imgWidth;
$cuthumbHeight=$imgHeight;
switch($thumbType){
case1:
//固定寬度高度自增
$h=$thumbWidth/$imgWidth*$imgHeight;
break;
case2:
//固定高度寬度自增
$w=$thumbHeight/$imgHeight*$imgWidth;
break;
case3:
//固定寬度高度裁切
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
break;
case4:
//固定高度寬度裁切
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
break;
case5:
//縮放最大邊原圖不裁切
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原圖
*@paramstring$outFile另存文件名
*@paramstring$thumbWidth縮略圖寬度
*@paramstring$thumbHeight縮略圖高度
*@paramstring$thumbType裁切圖片的方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切6縮略圖尺寸不變，自動裁切最大邊
*@returnbool|string
*/
publicfunctionthumb($img,$outFile='',$thumbWidth='',$thumbHeight='',$thumbType=''){
if(!$this->check($img)){
returnfalse;
}
//基礎配置
$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]);
//獲得相關尺寸
$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);//關閉混色
imagesavealpha($res_thumb,true);//儲存透明通道
}
//繪制縮略圖X
if(function_exists("imageresampled")){
imageresampled($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}else{
imageresized($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怎麼壓縮圖片

利用canvas的drawImage方法來繪制圖片，並且設置繪制的圖片的width跟height，最後再通過canvas的toDataURL方法來生成壓縮後的dataUR

下面直接上代碼：

html:

[html]view plain

• <divclass="head_imgpr">

• <emclass="pa"></em>

• <imgsrc='../images/icon_touxiang.png'alt=""class="modify_img"/>

• <inputid="photo"type="file"accept="image/*"/>

• </div>

④ 如何壓縮圖片的大小

具體操作方法如下：

方法一：

1.如果你的圖片格式是PNG格式的，而且對圖片質量要求不高，可以使用下面的方法來壓縮圖片大小。

拓展資料：

電腦內存不足，微信上隱藏了一個無限存儲空間，照片視頻永久保存。但是，智能手機的內存經常出現內存不足，這會給我們使用手機帶來很大的不方便，往往會造成我們手機卡死不能用了。今天，我教大家一個方法，可以把照片視頻保存在微信存儲空間上，再也不會有手機內存不足的擔憂。手機內存是手機上最寶貴的資源，學會了這個方法，就可以把手機上的照片視頻文件的上傳到群空間。