做了一个图片等比缩放的js
今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里也曾遇到过要编写一个等比缩放的东西,后来不了了之,今天就一起解决了它吧. 1.等比缩放? 等比缩放就是一张图片按照比例缩放,而不是按照容器大小去缩放,那样会变形而且变得很丑,例如下面的示例: 这是原图片,大小是200*100:
, 如果不按比例缩放成100*100:
,很明显变形了. 我现在要的效果是这样的:
在两边多出两块空白,图片是100*100的,但是里面的内容是没有变形的. 2.OK,还有那些需求? 男人对自己要狠一点,再想想还会有哪些地方用到这个功能吧! 第一个需求就是上面演示的那样,给任意一个图片,给一个缩放后的尺寸,然后完成缩放,外层是一个a标签,以便表现出空白和空间的感觉. 第二个需求是,页面上有很多图片,有大有小,很大的图片会影响美观,这时候规定一个最大的边长值,如果某个图片的最长边大于这个值,那么就缩放这个图片,从而使其不至于影响页面样式的美观. 好了,先这些吧,现在就动手分析原理 3.原理? 图片的等比缩放通常都是后台来完成的,后台完成这项工作可以保持图片的完全不失真和容量的控制,但是难保有不能控制后台的情况,这时候就需要在前台做点手脚了,但是这种处理后的图片虽然形状规则,但是可能会看起来比较不清楚,特别是带字的图片. 这个处理里的所有处理都是在文档加载完后处理的,不必等到图片也下载完.dom加载完的处理方式可以参见某些框架的源码,我的框架里也提供了一个实现. 文档加载完后,我们取页面上要处理的img元素,可以过滤一下这些元素,例如gif图片可以不处理,因为gif一般不会太大,而且gif的处理在ie6下比较麻烦,会引起一系列问题. 然后拿到图片和要缩放到的尺寸之后,我们之后要做的就是获取到图片的大小,可是通过img元素我们获取不到这些值,我们要根据img.src来创建一个new Image().在它的onload事件中才能得到图片的大小,取得图片的大小后,重要的一步来了,我们需要根据这个大小和要缩放到的尺寸来判断怎么缩放,是根据宽来缩放呢,还是根据高来缩放.
, 如果不按比例缩放成100*100:
,很明显变形了. 我现在要的效果是这样的:
在两边多出两块空白,图片是100*100的,但是里面的内容是没有变形的. 2.OK,还有那些需求? 男人对自己要狠一点,再想想还会有哪些地方用到这个功能吧! 第一个需求就是上面演示的那样,给任意一个图片,给一个缩放后的尺寸,然后完成缩放,外层是一个a标签,以便表现出空白和空间的感觉. 第二个需求是,页面上有很多图片,有大有小,很大的图片会影响美观,这时候规定一个最大的边长值,如果某个图片的最长边大于这个值,那么就缩放这个图片,从而使其不至于影响页面样式的美观. 好了,先这些吧,现在就动手分析原理 3.原理? 图片的等比缩放通常都是后台来完成的,后台完成这项工作可以保持图片的完全不失真和容量的控制,但是难保有不能控制后台的情况,这时候就需要在前台做点手脚了,但是这种处理后的图片虽然形状规则,但是可能会看起来比较不清楚,特别是带字的图片. 这个处理里的所有处理都是在文档加载完后处理的,不必等到图片也下载完.dom加载完的处理方式可以参见某些框架的源码,我的框架里也提供了一个实现. 文档加载完后,我们取页面上要处理的img元素,可以过滤一下这些元素,例如gif图片可以不处理,因为gif一般不会太大,而且gif的处理在ie6下比较麻烦,会引起一系列问题. 然后拿到图片和要缩放到的尺寸之后,我们之后要做的就是获取到图片的大小,可是通过img元素我们获取不到这些值,我们要根据img.src来创建一个new Image().在它的onload事件中才能得到图片的大小,取得图片的大小后,重要的一步来了,我们需要根据这个大小和要缩放到的尺寸来判断怎么缩放,是根据宽来缩放呢,还是根据高来缩放.
//下面判断应该按宽还是高来缩放图片
var scale;
if(sizeV.x/sizeV.y>(scale=this.width/this.height)) useW=false;
else useW=true;
//这里是我框架里的方法,用来混合样式到某个元素
M.dom.mixinStyle(img,{(useW?sizeV.x:sizeV.y*scale)+"px",
height:(useW?sizeV.x/scale:sizeV.y)+"px"
})
原理就是判断图片的高宽比和要缩放到的尺寸的高宽比的大小,这里说起来比较绕口,大家自己去想,上面的变量useW是表示按照宽度缩放,如果是true 则在定义样式的时候宽度就直接是要缩放的宽度,高度则根据图片的高宽比计算得出,否则相反. 关于在外面套一个a标签来生成空白的问题也很简单,
M.dom.mixinStyle((wrap=document.createElement("a")),{
sizeV.x+"px",
height:sizeV.y+"px",
display:"inline-block",
textAlign:"center",
background:"#ddd"
});
if(useW==true) M.dom.mixinStyle((wrap),{
height:sizeV.x/scale+"px",
padding:(sizeV.y-sizeV.x/scale)/2+"px 0px"
});
原理都差不多,根据情况不同生成不同的a标签 之后我们做了一些处理把图片又放回了它原来的位置: 全部代码如下:(里面用了几个我库里的函数,你应该知道的,M框架)
/**
*这是一个基础方法,可以修改其行为
*通常的使用情形是在页面里 需要限制最大图像的大小,防止页面被撑开,小的图片不处理,大的图片按缩放比缩放,
*这个方法,传入一个缩放的大小,然后判断图片大小,然后根据图片的比例和要缩放到的比例比较 最后做到等比缩放来适应外容器
*使用情形有:1.页面里大图片的缩小处理 2.在一个固定区域里放进各种比例的图片,用js控制他们的大小,然后等比缩放,使宽或者高中的一个适应父容器
*/
imgResize:function(img,sizeV){
//首先判断有没有下一个兄弟元素,如果没有就好办了,如果有则返回的时候insertbefore一下
var next=img.nextSibling;
var imgSrc=img.src;
// if(/.*.gif.*/i.test(imgSrc)) return; //过滤gif图片,gif的处理会引起一些问题,
var img_r=new Image();
var imgSize,useW;
img_r.onload=function(){
this.onload=null;//如果过滤了gif图片,可以去掉这句
imgSize=new M.Vector(this.width,this.height);
//下面判断应该按宽还是高来缩放图片
var scale,wrap;
if(sizeV.x/sizeV.y>(scale=this.width/this.height)) useW=false;
else useW=true;
M.dom.mixinStyle((wrap=document.createElement("a")),{
sizeV.x+"px",
height:sizeV.y+"px",
display:"inline-block",
textAlign:"center",
background:"#ddd"
});
if(useW==true) M.dom.mixinStyle((wrap),{
height:sizeV.x/scale+"px",
padding:(sizeV.y-sizeV.x/scale)/2+"px 0px"
});
var p=img.parentNode;
wrap.appendChild(p.removeChild(img));
M.dom.mixinStyle(img,{
(useW?sizeV.x:sizeV.y*scale)+"px",
height:(useW?sizeV.x/scale:sizeV.y)+"px"
})
try{
if(next){
// alert("dd");
p.insertBefore(wrap,next);
}else{
p.appendChild(wrap);
}
}catch(e){}
}
img_r.src=imgSrc;
}
4.等等? 好像少了一个需求,是的,将超限的图片缩小的需求比上述的需求简单,所以不再重复,无非是从dom里取出来,根据src创建Image,然后onload里调整img大小,然后再塞回去(注意怎么塞才能正好塞回去,我这里分了两种情况,一种是有下一个兄弟节点的,记住这个节点,之后insertBefore即可,没有下一个兄弟节点的,之后appendChild即可) 下面还有个效果demo: demo其他有用的链接http://www.divcss5.com/wenji/w632.shtml
http://www.linuxfly.org/post/518/
http://www.111cn.net/cssdiv/css/53349.htm