js等比压缩图片代码
在显示图片的时候,由于我们上传的图片大小不一,会导致页面变乱,
直接在页面上规定图片长和宽,看到的图片会变形。可以用javascript
实现等比压缩图片。
放入head里面
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 164/112){
if(image.width>164){
ImgD.width=164;
ImgD.height=(image.height*164)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>112){
ImgD.height=112;
ImgD.width=(image.width*112)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
图片调用
<a href="http://www.sina.com.cn" target="_blank">
<img src="http://i3.sinaimg.cn/ty/k/
2007-11-18/U2136P6T12D3302307F44DT20071118133843.jpg"
border="0" width="164" height="112"
onload="javascript:DrawImage(this);"></a>
这样可以实现等比例缩放!但是这样的压缩的效果并不能改变
图片的真实大小,只是显示出来大小变化了,最好的方法是使
用aspjpeg组件来压缩,来生成小的图片。
转载:http://www.bcbbs.net/news/Content1547.aspx
分享到:
相关推荐
### 图片等比压缩JS代码解析 #### 一、引言 随着Web技术的发展与进步,用户对于网页加载速度及视觉效果的要求越来越高。为了优化用户体验,前端开发人员常常需要处理图片资源,其中“图片等比压缩”是一项常用的...
图片等比输出是确保图像在不同屏幕尺寸下保持原比例显示的关键技术,避免了图片被拉伸、压缩或变形,从而维护了图片的质量和视觉一致性。本篇文章将深入探讨如何使用JavaScript(简称js)来实现这一功能,并提供一个...
本文档主要介绍在微信小程序中上传图片并进行等比压缩至指定大小的过程,并提供了具体的实例代码供读者参考。 首先,需要了解微信小程序的开发基础,包括它的框架、生命周期、以及如何配置项目。在小程序框架中,...
"Javascript等比缩图"就是一种利用JavaScript编程语言实现图片按比例缩放的技术,目的是确保图片在缩小或放大过程中保持原始的比例,避免图像变形,从而保证视觉效果的一致性。 首先,我们需要理解等比缩图的基本...
等比缩放确保了图片在不同尺寸的屏幕或窗口中保持其原始的比例,避免出现图像拉伸或压缩导致失真的情况。本话题主要探讨如何实现图片等比缩放,并兼容主流浏览器。 首先,我们需要理解等比缩放的概念。等比缩放意味...
等比缩放图片是指在改变图片大小时,保持图片的宽高比不变,这样可以避免图片被拉伸或压缩变形。文件中通过判断图片的原始宽高与设定的显示宽高,动态地计算缩放后图片的尺寸,并通过jQuery的CSS方法来调整图片尺寸...
而等比缩放图片时,如果直接使用CSS的transform属性来缩放图片,JavaScript代码将变得更加简洁和高效,因为现代浏览器对CSS的硬件加速支持很好,这也可以减轻JavaScript引擎的负担。 在处理图片时,开发者还需要...
// 获取原图比例,为了等比压缩 cvs.width = 400; cvs.height = cvs.width / ratio; let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 画在canvas上 // 压缩后新图的...
3. 对图片进行等比压缩,限制其宽度和高度; 4. 最后使用Canvas的toDataURL()方法压缩图片质量。 这些步骤结合起来可以有效地解决移动端图片上传过程中遇到的图片方向错误和文件过大等问题。通过上述方法的应用,...
解决图片上传前域视频、本地文件比缩放、压缩支持视频、同类视频等功能。 图片,宽度图片:同时设置参数height 等比缩放:按比例缩放,只设置宽度;同理按高度缩放,只设置高度 不缩放、不缩放,直接返回源文件...
数据库连接处理:DbHelperSQL Excel连接等,图片处理:压缩,水印,等比缩放,HTTP处理:下载HTML源码,字符串处理:加密,字符串长度控制,时间格式化输出,邮件发送,JavaScript:ASp.net后台生成JS代码等 工作几年以来...
3. 图片的高度大于显示器的高度时,若宽度与高度比例与显示器相匹配(即图片宽度可以等比缩放到显示器的宽度),提示"适合做您的桌面";否则,提示"不完全适合您的分辨率,您可以自己动手裁剪"。 4. 图片宽度小于...
15、水印缩略图,可按要求等比缩小,可按要求在指定位置加图片或文字水印,提升内容被转载后的宣传机会。 16、强化在线编辑器(采用ewebeditor在线编辑器),可视化编辑器,类似word的所件即所得的在线内容编辑功能...
15、水印缩略图,可按要求等比缩小,可按要求在指定位置加图片或文字水印,提升内容被转载后的宣传机会。 16、强化在线编辑器(采用ewebeditor在线编辑器),可视化编辑器,类似word的所件即所得的在线内容编辑功能...
33、水印缩略图,可按要求等比缩小,可按要求在指定位置加图片或文字水印,提升内容被转载后的宣传机会。 34、两种编辑器选择,可视化编辑器,类似word的所件即所得的在线内容编辑功能,支持表格、图片、FLASH、...