有时候看来还是要转变观念

之前被要求做一个固定宽高比缩小图片显示并且对必要的图片加底色的东西.

刚开始思考的时候觉得很复杂,最初想象的解决方案是这样的:

1.在消息录入的时候,对上传的图片进行控制,根据最终的大小比率来缩小图像,并且用PHP的内置图像处理函数来完成对图像的加工,然后存放到硬盘中,调用的时候直接显示那个处理完成的图像即可.这个的优点是一次性完成,速度快,但是可能影响到了正文的图片.
2.在图片输出的时候对图片进行控制,原理和上面一样,同样是用PHP生成一个满足要求的图片,然后将图片输出到客户端,这样的话好处在于正文图片不会被修改,坏处在于每次都要重新生成一次,不过可以考虑用缓冲机制.

不过总体考虑都还是比较欠妥,因为太复杂了.有没有更加简单有效的东西呢?

结果...还是想到了JavaScript..不能总在服务器端想办法,应该更多的想到客户端的作用啊~

于是,简单易行的东西出来了...之前限于图片底色的问题,我一直让我把思维禁锢在了用PHP的图片处理函数上面了,而JavaScript上是缺乏这样的函数的.但是后来想到,直接加个纯色的DIV上去做背景不就好了??

然后用JavaScript来把图片缩小到适当大小,居中一下不就可以了?

于是程序如下:

var proMaxHeight = 200;
var proMaxWidth = 280;
var top = document.getElementById("centerpics").firstChild;
if (top.nodeName != "A")
{
    var top = document.getElementById("centerpics").firstChild.nextSibling.firstChild;
}
else
{
    var top = document.getElementById("centerpics").firstChild.firstChild;
}
function proDownImage(ImgD){
      var image=new Image();
      image.src=ImgD.src;
      if(image.width>0 && image.height>0){
      var rate = (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;
                  }
      }
}

程序有时候更加考验的并不是方法,而是想法啊.