在线图片压缩显示js_如何利用JS或者CSS样式来自动调整图片大小

① 如何实现js中图片压缩方法

1.这个用PS转换成JPG或者GIF或png比较大小选用。

② 怎么用javaScript在线压缩图片

主要用了两个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 ****(***)

③ js压缩图片到固定像素以内，500k为例

本文旨在探究js压缩图片的两种方式： 改变图片长宽 ， 改变图片质量 ，和结合了以上两者的 最终方案 。

首先，阅读本文需要知道canvas的两个方法

这两个方法具体的说明可以在MDN上查看，关于图片压缩，也有很多现成的博客可以直接用。但是那些博客都有个问题，并没有关心之后图片的压缩质量。
我试着用一个现成的例子去跑了一下，一个1.7M的图片压缩到了23k，堪称像素级毁灭性破坏。

假如一张大图可能包含着很多文字等关键信息，必须上传之后使用方能清晰辨认。所以要压缩之后质量尽可能接近500k的。500k像素以内，就是若一张图宽度为1024，则高度不能超过500。因为图片有其他的信息，也是要占大小的。即不得大于 1024*500 。

所以激答，根据需求，上传图片不能超过500k的情况下尽可能保留图片的清晰度。当然如果可以的情况下用上面提到的 canvas.toDataURL 设置压缩程度为0.9，0.8试试看，图片质量可以接受，大小会有大幅度的缩小。

如果不压缩，靠调整图片长宽去控制上传大小呢？
原理很简单，就是靠不断地缩小限定的最大宽高，直到最终长宽的积小于规定的大小。
这种方法有可能最后得出的图片的大小会略大于规定大小，原因上文也提到过了，如果想使用这种方法，可自行再调整一下。

上面的方法有个问题，就是改变了图片的原始长宽。如果一个图的长宽足够大，压缩图片质量，糊一点但是内容看得清也是ok的嘛。所以，跟上面同理，我们可以不断调整图片的质量设定直到大小合适，那么，如何在图片上传之前知道图片的大小呢？
首先，需要知道的一点是，压缩之后拿到的base64字符串会转成blob对象，然后传给服务端。
可以查阅文档，blob对象有个属性是size

这个size就是上传之后实际的文件大小。
参照上面的思路，可以每次改变 canvas.toDataURL('image/' + fileType, level); level的值，去调整压缩图片质量，然后用blob对象的size去验证是否满足500k以内的需求。
关于 canvas.toDataURL 的level到底是怎么计算的，MDN文档里也没说，写了个循环一次减少0.1的level压缩了几个图片

用加减乘除算了一下，没找到规律，数学不好放弃了（这个东西好像也不是能观察出来的，看结果跟初始大小没啥关系）。
这里要注意的是，有可能遇到超大图片闷早，0.1的level可能不足以压缩到500k，所以小于0.1的时候，改变level递减的差值继续压缩下去

在开始接收到图片的时候给一个loading增加用户的耐心好了，loading万岁~

其实单纯的压缩质量遇到稍大的图片，会导致页面高频计算，然后页面基本就用不了了- -。有尝试过用iphone的一个屏幕截图（10M左右），压的时候稍过一会，整个手机都在发烫，只能杀进程。

所以，若对长度没有特殊的限制，可以做一个缩放，去加快压缩的进度蚂铅雀，提高能压缩的图片大小上限。

页面到了ios上还是不行- -，可以看到最后图片level为0.001，最长边为764。
问题还是循环次数还是过多，计算频率太高。从图中可看出，对于大图来说，初始设定的level和图片尺寸过于宽松，可以优化一下初始level和尺寸。

有的时候还会遇到一张图片无论如何也压不到500k，就是上一次和这次的压缩后大小没有变化，这种情况需要抛错，不让循环继续。

大图片的等待时间稍长，可以给用户先预览一个base64的图片增加等待耐心，方法名为 getImgBase64 ,这里都一并给出了

解决的隐患：上面这个方案会出现我需要一个500k的照片，压到了520k之后，再压了一次。有时候这最后的一次会特别夸张，直接将图片弄到了几十k。
参考了： https://github.com/WangYuLue/image-conversion
这个库里面有个方法 compressAccurately ,这个方法可以比较精准地压缩。偷偷翻了一下源码。

其实上一个方案的痛点就在于，如何在每一个压缩循环里处理尺寸和压缩比例。

总结

如有纰漏，欢迎指正

④ 怎样在客户端利用js 压缩图片大小，然后上传至服务器比如2M压缩成几十KB

无法实现，js没有权限去修改本地文件的，只能是将大图上传到服务器后再压缩

⑤ 使用compressorjs图片压缩提示The current browser does notsupport image compression

`compressorjs` 是一个基于 JavaScript 的图片压缩库，它使用浏览器原生的 Canvas API 来进行图片压缩。但是，返仔磨并不是所有的浏览器都支持漏斗 Canvas API 中的图片压缩功能，因此在某些浏览器上，`compressorjs` 可能会提示 "The current browser does not support image compression"。
如果你遇到了这个问题，可以考虑使用其他的图片压缩库，例如 TinyPNG、Kraken、ImageOptim 等，它们提供了更广泛的浏览器戚亏兼容性。此外，如果你确定你的浏览器支持 Canvas API，但仍然遇到了问题，你可以尝试更新你的浏览器或清除浏览器缓存，以解决问题。

⑥ 网页开发，怎么动态压缩图片显示缩略图

现在有智能在线图片压缩的工具，你只需要输入你期此如望压缩后的KB大小就搞定，下面讲一下他的使用方法：

1、浏览器输入森戚启“秒会压缩大师”->图片压缩 ->图片改大小。
2、输入你期望压缩后的KB大小，宽高可以默认也可以根据你的需要进行更改。
3、有两种图片压缩模式可供选择，智能压缩&指仔举定大小压缩。
4、拖入或添加图片，稍等片刻即可压缩完成，并且显示压缩后的图片参数。
5、建议使用电脑浏览器。

⑦ 有什么在线图片缩小的方法

在线智能压缩图片大小

▼ 在线一键压缩图片步骤：

一、首先点击加号添加需要压缩的图片。目前已知支持对jpg、png等多种常见的图片格式进行压缩，如果上传图片并压缩成功，则代表支持该图片格式。
二、可以自行修改图片需要被压缩到的最大宽高尺寸，默认为图片原始的宽高尺寸，且宽高比例是自动锁定的。
三、必须设置图片被压缩后，期望输出的图片文件的最大占用空间。(必填项)
四、选择图片生成的算法。默认为混合优先算法，绝大多数情况下使用默认算法即可。
五、压缩的设定值不能小于1Kb，但图片压缩的最终效果可以小于1Kb。

⑧ 如何利用JS或者CSS样式来自动调整图片大小

js版和css版自动按比例调整图片大小方法，分别如下：

<title>javascript图片大小处理函数</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：

<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>


<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>

⑨ js 压缩图片

不可能，貌似你说的这个用单纯的脚本没有能做到的

这个...我还真是不知道，因为对js不是很熟悉，我所知道的是可以用第三方组件，比如aspjpeg之类的可以实现

⑩ js对从服务器取得的图片进行压缩显示

浏览器前端里面跑js没办法压缩图片的，js没io，只能载入图片，无法读入真正的图片数据

导航:首页 > 编程语言 > 在线图片压缩显示js

在线图片压缩显示js

与在线图片压缩显示js相关的资料

友情链接