缺點你無法直接驗證傳來的base64數(shù)據(jù)的完整性，比如大小，文件頭之類的，還需要自己來實現(xiàn)。
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)德清免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Clipic.js插件可以為移動端 (僅支持移動端) 提供頭像上傳并裁剪成指定尺寸，用原生js開發(fā)的，輕量級，包含html跟css，不到8kb。點此鏈接體驗：
參數(shù)說明
width:Number (默認(rèn)：500) – 裁剪寬度
height:Number (默認(rèn)：500) – 裁剪高度
ratio:Number (可選) – 裁剪的比例，當(dāng)傳入ratio時width/height將無效
src:String (必傳) – 需要裁剪的圖片，可以是圖片鏈接，或者 base64
type:String (默認(rèn)：jpeg) – 裁剪后圖片的類型，僅支持 jpeg/png 兩種
quality:Number (默認(rèn)：0.9) – 壓縮質(zhì)量
buttonText:Array (默認(rèn)：[‘取消’, ‘重置’, ‘完成’]) – 底部三個按鈕文本
HTML是用來做網(wǎng)站的一種語言哈，就是在html里面改變圖片的大小就要改變文件代碼，打開圖片源代碼，圖片文件的大小是height，和寬，我們可以更改，在語言中我們需要設(shè)置的都是英文的。
現(xiàn)在壓縮工具將圖片縮小之后都會對畫質(zhì)有影響，壓縮圖片文件選擇壓縮工具頁面中的普通壓縮就可以了壓縮程度不要過大，找到圖片壓縮工具，圖片要放置在工具頁面上進(jìn)行數(shù)據(jù)分析，根據(jù)圖片的大小工具會制定壓縮方案。
圖片分享論壇卻只允許發(fā)幾百KB的文件；微信、分享給朋友的時候自動壓縮的圖像都比較模糊
給你個圖片處理的類吧，圖片剪裁處理后，也就等于將圖片壓縮了。
/**
*?圖像處理類
*?============================================================================
*?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;
}
}
主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之后把壓縮好的照片放入內(nèi)存，最后內(nèi)存轉(zhuǎn)入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最后那張失真度很大了，壓縮效率蠻高的。
!DOCTYPE html
htmlhead meta charset="utf-8"/ titleFile API Test/title script type="text/javascript" src="js/jquery-1.11.0.min.js"/script script type="text/javascript" src="js/JIC.js"/script style #test{ display: none; } /style/headbodyinput type="file" id="fileImg" form img src="" id="test" alt=""/formscript function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);/script/body/html
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)
估計不是沒了，是你的html中對圖片文件的引用使用了類似絕對路徑的寫法，對方接收后，放置的路徑與你的不一樣，造成讀取失敗。
先檢查一下是不是真的把圖片發(fā)過去了，再檢查圖片url是不是寫對了。
重慶分公司
重慶分公司
