主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之後把壓縮好的照片放入內存，最後內存轉入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最後那張失真度很大了，壓縮效率蠻高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File 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></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> 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 ****(***)
② JQuery實現input上傳圖片顯示縮略圖
最近做一套手機商城頁面，在退款申請頁面有上傳圖片顯示縮略圖的功能，以前沒有做過這個，燃哪所以整理了一下。
在這里我把上傳按鈕input變成了透明色，然後用一個設置了+號背景圖的span蓋在上面實消洞現了上傳按鈕的樣式改變，如不用圖片也可以自行設置span樣式來達到想要的效果。
給 input 綁定了一個 change() 事件，當事件被觸發後，首先會檢測該瀏覽器是拿段枯否支持 HTML5 FileReader API ,如果支持就會執行一個 each 循環。
在每一個循環里，用正則表達式判斷文件後綴名是否為圖片格式，如果是圖片格式，如果是圖片，就會用 readAsDataURL 方法來讀取其 BASE64編碼，然後以其為img元素的 src 屬性值，添加 img 元素到 #imgPreview 中，實現上傳顯示縮略圖。
③ 前端圖片壓縮上傳
最近公司有個需求，就是上傳照片時需要先壓縮。
其中上傳原理是用ajax上傳formdata數據，壓縮是瞎宏採用canvas進行處理。
利用canvas處理Image對象調整改神讓像素尺寸，輸出base64格式，再將base64格式轉換為blob對象，再放進formdata對象
上傳核局文件用formdata，圖像處理用canvas。
④ js/jquery上傳圖片的問題
function showImage(fileid,imgid,atagID){
var ext = "_0";
var thumb = $('img#'+imgid);
var litbox = $('a#'+atagID);
var img1path = document.getElementById("img1path");;
if($('.onTeedaError').length>0){
//img1path.value="";
}
var messages =document.getElementById("messages");
if(messages!=null){
//img1path.value="";
}
new AjaxUpload(fileid, {
action: '../../pdfChangeImgUploadServlet?pdfNameEnd=_PERT',
name: ext,
onSubmit: function(file, extension) {
extension=extension.toLowerCase();
if(extension=="pdf")
{
$("握殲賀#photoError").hide();
$.blockUI({
message: $('span#displayBox'),
css: {
border: 'none'改鍵,
width: '270px',
}
});
}else{
$("#photoError").show();
return false;
}
},
onComplete: function(file, response) {
$('.pdfImg').remove();
$('#pfont').hide();
$.unblockUI();
var res = eval('('+response+');');
var timestemp = new Date().getTime();
var srcStr = res['srcStr'段派];
$('#addImg').val(res['srcStr']);
var imgWidth = res['w'] + "px";
var imgHeight = res['h'] + "px";
$("#addImgWidth").val(imgWidth);
$("#addImgHeight").val(imgHeight);
var str = "";
var arr = [];
arr = srcStr.split(",");
$('#imgFile').attr("value",srcStr);
for(var i=0;i<arr.length;i++){
var jpgsrc = arr[i] + '?'+ timestemp;
if(i == 0){
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
} else {
str=str+"<a class=\"pdfImg\" style=\"margin-left:10px;display:none;\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">";
str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middle;cursor:pointer;width:"+ imgWidth +";height:"+ imgHeight +" \" />";
str=str+"</a>";
}
}
$('#imgFontDiv').append(str);
//thumb.attr('src', res['src']+'?'+timestemp);
//litbox.attr('href', res['src']+'?'+timestemp);
lightbox.refresh();
$('.jpgImgFont').attr('style', 'width: ' + imgWidth + '; height: ' + imgHeight + ";" ).hide().fadeIn('slow');
if(res['img1path']!=""){
img1path.value=res['img1path'];
}
if (imgid == 'imgFont') {
document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1);
}
//}
}
});
}
function goClearPhoto(textID,imgID,hrefID,photoName){
var _file = document.getElementById(textID);
if(_file.files)
{
_file.value = "";
}
else
{
if (typeof _file != "object")
{
return null;
}
var textID=document.getElementById(textID);
textID.value="";
var timestemp = new Date().getTime();
var src=document.getElementById("carPermitDefaultPath").value;
var thumb = $('img#'+imgID);
var litbox = $('a#'+hrefID);
thumb.attr('src',"/groupware/images/PdfSample.png");
thumb.attr('style', 'width:230px;height:240px;border:0px;vertical-align:middle;cursor:pointer;' ).hide().fadeIn('slow');
litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp);
$('.pdfImg').remove();
litbox.show();
lightbox.refresh();
var photoName=document.getElementById(photoName);
photoName.value=null;
var imgFont= document.getElementById(imgFont);
imgFont.value = null;
}
$("#imgFile").val("");
$("#img1path").val("");
}
html:
<body onload="showImage('insUpdPermitPhoto','imgFont','pfont');>
<div style="margin-top:3px;margin-bottom:-8px">
<span class="sl-custom-file" style="">
<input type="text" id="img1path" placeholder="対応フォーマット：pdfのみ" readonly="true" class="input-height" style="width:260px;height:20px;"/>
<button class="btn btn-small" id="reference" type="button" style="margin-left:-2px;margin-top:-12px">
<span style="color:black;">參照</span>
</button>
<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />
</span>
<a href="javascript:void(0)" onfocus="this.blur();" onClick="goClearPhoto('img1path','imgFont','pfont','photoName');" class="btn btn-small" style="margin-top:-15px;">
<span style="color:black;">削除</span>
</a>
</div>
後台用方法把圖片復制到指定路徑就可以了
⑤ 在網站建設中如何處理圖片
對於網站建設的運營的人來說，除了網站本身的框架(程序功能、布局、版塊、內容等)安全穩定之外，還需要做好網站優化(SEO)，而網站優化又包括站內優化和站外優化兩大方面，這樣做的目的只要是為了滿足搜索引擎的排名規則，從而讓網站內容在搜索引擎檢索中獲得比較靠前的排名，從而實現增加網站的流量，提高網站轉化率等。
而在網站優化中的站內優化規劃中，網站圖片的處理也是尤為重要的，對於大多數的網站來說，都主要是以圖文為主的，而最占網站空間大小、影響網站打開訪問速度的也是圖片，所以要如何處理好網站圖片優化的問題也是很關鍵的。
那麼我們應該如何處理圖片呢?主要從兩方面下手：
首先，控制圖片的大小：
不管是資訊網站還是企業網站，建議盡量少用那種全屏大小的圖片，如果不得不用到的話，也建議在做完圖片後，對需要展示的圖片在不影響圖片質量的情況下進行壓縮，關於如何做圖片壓縮，網上也有很多關於圖片壓縮的工具，這里個人推薦一款：【智圖】的工具旁讓簡，主要功能是用於圖片壓縮和圖片格式轉換的工具，操作也很簡單，只需要選擇【質量調節】(圖片質量)然後點擊【上傳】就可以自動壓縮完成，處理完成後我們可以看到處理後的信息，最主要是目前這款工具是免費的，有需要的可以了解使用。
壓縮前圖片的大小是：5.03M
壓縮後的圖片大小是：1.13M
除了使用圖片壓縮工具之外，也可以通過ps對即將保存的圖片進行圖片品質的選擇，從而實現圖片的壓縮。
其次：我們可以運褲選擇WebP（是一種同時提供了有損壓縮與無損壓縮的圖片文件格式）的新型圖片格式，同質量的WebP圖片比JPEG小25-34%，比PNG的體積小26%。像目前我們知道的京東等大型網站都開始慢慢使用這種WebP的圖片格式。
再次：可以通過優化程序代碼的方式，對上傳的圖片進行縮略圖的處理，尤其是在訪問網站首頁、頻道頁面和列表頁面或者相關專題頁面的時候，也可以有效的減少網站的負載；或者也可以通過jQuery.lazyload實現圖片延時載入，這樣不但可以提高網頁下載速度，不至於出現整個頁面打不開的情況，jQuery.lazyload在某些情況下，它也能幫助減輕伺服器負載。
它的使用方法也很簡單，直接引用jquery和jquery.lazyload.js到你網站的相關頁面：
html圖片調用方法
為圖片加滑禪入樣式lazy圖片路徑引用方法用data-original
⑥ jquery怎麼壓縮圖片質量與大小
jquery不能更改圖片的體積。你可以試試服務端語言，如java php nodejs之類的
⑦ php 語言，我用jquery。uploadify 上傳壓縮文件
應禪並該是你配置文件問題。
打開配置文件php.ini 找到upload_max_size 修改即賀隱跡可。 記得重啟apache（WEB伺服器）攜耐
⑧ jquery如何將頁面生成的圖片上傳到伺服器
File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>
⑨ thinkphp3.1頭像剪切上傳怎麼把jquery剪切好的圖片上傳保存到資料庫
canvas
轉成
base64位，然後得到圖片的編碼，然後上傳到資料庫
⑩ jquery 壓縮圖片質量問題。大神求救！！！！！！
建議做個限制超過1M不讓上傳，用戶自己修改圖片尺寸