处理页面载入图片js(等比例压缩图片)

第一页面html  <div class="admin">${answer.content}</div>

<div class="adminss">${answer.content}</div>

第二循环压缩${answer.content}内容中的大图片

<script>

jQuery(function(){

setTimeout(‘imgLoad()‘1000)//延长载入一分钟

});

function ‘imgLoad(){//页面载入时循环遍历压缩admin以下内容带有img标志的图片

jQuery(‘.admin img‘).each(function(i){

DrawImage(jQuery(‘.admin img‘).eq(i),600,600);

});

jQuery(‘.adminss img‘).each(function(i){

DrawImage(jQuery(‘.adminss img‘).eq(i),500,500);

});)//页面载入时循环遍历压缩admin以下内容带有img标志的图片 500,500用户自己定义

}

</script>

第三 压缩图片的js

<script language="JavaScript">

<!--

//图片按比例缩放

var flag=false;

function DrawImage(ImgD,iwidth,iheight){

//參数(图片,同意的宽度,同意的高度)

var image=ImD;

image.src=ImgD.attr(‘src‘);

if(image.width()>0 && image.height()>0){

flag=true;

if(image.width()/image.height()>= iwidth/iheight){

if(image.width()>iwidth){

ImgD.width(iwidth);

ImgD.height((image.height()*iwidth)/image.width());

}else{

ImgD.width(image.width());

ImgD.height(image.height());

}

ImgD.alt=image.width+"×"+image.height;

}

else{

if(image.height()>iheight){

ImgD.height(iheight);

ImgD.width((image.width()*iheight)/image.height());

}else{

ImgD.width(image.width());

ImgD.height(image.height());

}

ImgD.alt=image.width+"×"+image.height;

}

}

}

//-->

</script>

另外一种需求例如以下:

在Web上显示图片,通常都会有图片显示比例问题,假设不给<img />限制width和height,那么假设图片大了就会将整个页面挤乱,图片小了又会使图片失真。

我的需求例如以下:

1、预先定义好图片显示的标准宽度和高度。

2、假设图片的大小超过了标准定义,那么等比例压缩图片。

3、假设图片的大小等于标准定义。那么依照标准宽度和高度显示图片。

4、假设图片的大小小于标准定义,那么不正确图片进行不论什么压缩处理。

可能是我搜索的keyword不正确吧。在网上找了非常长时间。才找到,感觉非常好使。代码例如以下

<script language="JavaScript">

<!--

//图片按比例缩放

var flag=false;

function DrawImage(ImgD,iwidth,iheight){

//參数(图片,同意的宽度,同意的高度)

var image=new Image();

image.src=ImgD.src;

if(image.width>0 && image.height>0){

flag=true;

if(image.width/image.height>= iwidth/iheight){

if(image.width>iwidth){

ImgD.width=iwidth;

ImgD.height=(image.height*iwidth)/image.width;

}else{

ImgD.width=image.width;

ImgD.height=image.height;

}

ImgD.alt=image.width+"×"+image.height;

}

else{

if(image.height>iheight){

ImgD.height=iheight;

ImgD.width=(image.width*iheight)/image.height;

}else{

ImgD.width=image.width;

ImgD.height=image.height;

}

ImgD.alt=image.width+"×"+image.height;

}

}

}

//-->

</script>

调用:<img src="images/toplogo.gif" >

时间: 2024-09-29 00:39:14

处理页面载入图片js(等比例压缩图片)的相关文章

处理页面加载图片js(等比例压缩图片)

第一页面html  <div class="admin">${answer.content}</div> <div class="adminss">${answer.content}</div> 第二循环压缩${answer.content}内容中的大图片 <script> jQuery(function(){ setTimeout('imgLoad()'1000)//延长加载一分钟 }); functio

js等比压缩图片实现

// 等比压缩图片工具 function proDownImage(img) { var setSize = {}; var obj = { width : img.parent().width(), height : img.parent().height() //外容器宽高 }; var image = new Image(); image.src = img.attr("src"); //图片路径 if (image.width > 0 && image.h

js等比例缩放图片(转载)

标签:等比例缩放 时间:2009-03-16 已阅读:7475 js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好,你可以运行代码看下效果. <html><head><title>等比例缩放图片</title><script>function DrawImage(Img

最新javascript自动按比例显示图片,按比例压缩图片显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

按比例压缩图片和图片转换成BASE64

通常会需要将突破转换为字符串的操作,贴此详例,仅供参考和积累 #region 按比例压缩图片和图片转换成BASE64 /// <summary> /// 按照比例缩小图片 /// </summary> /// <param name="srcImage">要缩小的图片</param> /// <param name="percent">缩小比例</param> /// <returns&g

原生JS,前端压缩图片方案

在移动互联网高速发展的今天,有太多太多的应用需要用户在移动Web上传图片文件.然而在上传图片前就对图片进行了压缩处理,从而提高图片的上传效率,减少用户的流量浪费,后台处理和用户体验也会得到提升. 为什么要这样做 遇到的问题: 1:在低网速下上传图片进度缓慢,用户体验差 2:后台处理较大的文件压力大. 3:业务需求要求文件大小..等等(或许还有更多) 在处理以上问题之前,需要给自己一些疑问 1:图片是否有必要保存原图 2:主要使用场景在移动端还是在PC端(图片处理消耗的性能和速度需要考虑) 3:需

js 等比例缩放图片

//第一个参数是当前对象this,第二个是宽,第三个是高 function datuIMG(datu,kuan,chang){ datu.width = kuan*100; datu.height = chang*100; //图片等比例缩小 if(datu.width*chang>datu.height*kuan){ datu.width=kuan; datu.height=(kuan*chang)/kuan; } else{ datu.width=(chang*kuan)/chang; da

JS等比例缩放图片,限定最大宽度和最大高度

JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= iwidth/iheight){ i

php等比例压缩图片

<?php function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); $pic_height = imagesy($im); if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight)) { if($maxwidth &am