上传图片前前端(js)对图片进行压缩

[卖棉的尼哥]

为了有更好的用户体验，想实现上传图片前对图片进行自动的缩放处理（上传的图片大小有限制，如果用户选择的图片过大，则自动按等比例进行缩小），求问各位大神下面的场景能否实现（如果能实现的话，求思路）：

1.用户通过文件选取框选择文件
2.js对用户选择的文件进行缩放处理，展示缩放后的图片给用户预览（这一步需要对不同的浏览器进行兼容性处理，目前到这一步还可以实现）
3.用户点击提交按钮，网页将缩放后的图片上传到服务器（将缩放后的图片上传到服务器这一步不知如何实现，处于带宽考虑，不将原始的图片上传）

[冰岛男孩]

可以生成一张缩略图的

[孟子E章]

可参考 http://www.xwcms.net/js/html5sl/64546.html

[scscms太阳光]

引用 2 楼 net_lover 的回复:

可参考 http://www.xwcms.net/js/html5sl/64546.html

首先js是没权压缩图片的，甚至谷歌浏览禁止访问type=file输入框。 提供的参考是html5选择图片，不兼容情况。 更坑的是上传后再使用PHP对图片裁剪，完全违背楼主意愿。 楼主要兼容所有浏览器只有制作浏览器插件了。

[keatkeat1987]

html5 可以把要上传的图片读出来，createObjectURL(file) 然后你就可以用canvas压缩或是剪辑然后转去base64格式上传. 不过旧游览器就很难兼容啦。 不过话说回来，还用旧游览器 的人应该也不会注重体验啦(他们重感情)。你就让他们慢慢上传呗 ^^

[喝口开水]

你可以用flash 的插件来解决这个问题

[hookee]

可以用ueditor的图片上传swf

[qq_21898191]

https://github.com/think2011/localResizeIMG3 这个工具推荐给你.

[updason]

楼主可以吧js压缩图片的代码共享一下么？万分感激~~

[娃都会打酱油了]

纯js无法实现的（至少目前不可以）……用flash才可以

[Bay-min]

http://www.jb51.net/html5/96843.html 用html5的canvas可以实现，当然IE9以下不会支持了

[html_haha]

PHP等比例缩放图片大小压缩图片空间 参考

[贾宝玉的贾]

h5前端压缩图片大概思路就是利用h5的画布， 用户上传一张图片先在页面显示，然后再获取图片的数据，放入已经创建设置好大小的画布中，从而实现了压缩。 h5前端压缩： http://blog.csdn.net/jialiuyang/article/details/50787636 function getUrl(fil, id) { var Cnv = document.getElementById('myCanvas'); var Cntx = Cnv.getContext('2d');//获取2d编辑容器 var imgss = new Image();//创建一个图片 var agoimg=document.getElementById("ago"); for (var intI = 0; intI < fil.length; intI++) {//图片回显 var tmpFile = fil[intI]; var reader = new FileReader(); reader.readAsDataURL(tmpFile); reader.onload = function (e) { url = e.target.result; imgss.src = url; agoimg.src=url; agoimg.onload = function () { //等比缩放 var m = imgss.width / imgss.height; Cnv.height =300;//该值影响缩放后图片的大小 Cnv.width= 300*m ; //img放入画布中 //设置起始坐标，结束坐标 Cntx.drawImage(agoimg, 0, 0,300*m,300); } } } } function pressss(){// //获取canvas压缩后的图片数据 var Pic = document.getElementById("myCanvas").toDataURL("image/png"); var imgs =document.getElementById("press"); imgs.src =Pic ; //上传 // 去除多余，得到base64编码的图片字节流 Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, ""); //可以用ajax提交到后台，提交后可以直接存数据库，也可以保存成图片，此处略 } <input type="file" id="fileId" name="fileId" value="上传图片" hidefocus="true" onchange="getUrl(this.files,this.id);"/> <canvas id="myCanvas" style="display: none" ></canvas> old img-><img src="" alt="" id="ago" style="width: 500px;"/> <input type="button" value="ya suo->" onclick="pressss()" /> new img-><img src="" alt="" id="press"/> </body> </html>