主要用了两个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不让上传，用户自己修改图片尺寸