今天主要改了罗宾钢琴的首页图片缩放问题

今天觉得首页出来的图片太慢了,所以着手改图片大小的问题

查看了一下原因,问题出在产品的缩略图上,以前是直接用<img src=XXX.jpg  width=190 height=140>这样缩放的,其实它还是把原图下载到了本地,原图有多少大就下载多少大.而主页要显示4个图片,每个原图都有600K就要2.4M,是够大的了.

于是考虑怎么样显示缩略图.

起先开始想把上传的时候就生成缩略图,但是,现在是asp,有难度的,网上找了好久没有攻略,都说要组件才能做到,而我的服务器没有组件.这条路不通.

然后考虑是否能上传两次,一次原图,一次在本地生成缩略图再上传.想用Flex,上传原图的代码是找到了,也很简单.可是本地弄个缩略再上传,我这个初学者就不会了,似乎要用到ImageData,再Matrix什么的,一下子研究不出来.

最后没办法了.上服务器研究一下,我记得是可以用.net 1.1的,下载了一个asp.net探针,果然服务器用的是windows2003, .net 1.1,那就好办了,做一个server端的缩放就完工了.

最后showimage.aspx代码如下:

<%

try
    {
        string input_ImgUrl = "../pic/" + Request.QueryString["name"];

        // ＝＝＝通过连接创建Image对象＝＝＝
        System.Drawing.Image oldimage = System.Drawing.Image.FromFile(Server.MapPath(input_ImgUrl));
        int int_Width = oldimage.Width;
        int int_Height = oldimage.Height;

        // ＝＝＝上传标准图大小＝＝＝
        int int_Standard_Width = Convert.ToInt32(Request.QueryString["width"]);
        int int_Standard_Height = Convert.ToInt32(Request.QueryString["height"]);

        int Reduce_Width = 0; // 缩小的宽度
        int Reduce_Height = 0; // 缩小的高度
        int level = 100; //缩略图的质量 1-100的范围

        // ＝＝＝获得缩小，裁剪大小＝＝＝
        double scaleHeight = ((double)int_Standard_Height / (double)int_Height);
        double scaleWidth = ((double)int_Standard_Width / (double)int_Width);

        if (scaleHeight < scaleWidth)
        {
            Reduce_Width = (int)(int_Width * scaleHeight);
            Reduce_Height = int_Standard_Height;
        }
        else if (scaleHeight > scaleWidth)
        {
            Reduce_Width = int_Standard_Width;
            Reduce_Height = (int)(int_Height * scaleWidth);
        }
        else
        {
            Reduce_Width = int_Standard_Width;
            Reduce_Height = int_Standard_Height;
        }

        // ＝＝＝缩小图片＝＝＝
        System.Drawing.Image thumbnailImage = oldimage.GetThumbnailImage(Reduce_Width, Reduce_Height, null, IntPtr.Zero);
        System.Drawing.Bitmap bm = new System.Drawing.Bitmap(thumbnailImage);

        // ＝＝＝处理JPG质量的函数＝＝＝
        System.Drawing.Imaging.ImageCodecInfo[] codecs = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
        System.Drawing.Imaging.ImageCodecInfo ici = null;
        foreach (System.Drawing.Imaging.ImageCodecInfo codec in codecs)
        {
            if (codec.MimeType == "image/jpeg")
                ici = codec;
        }
        System.Drawing.Imaging.EncoderParameters ep = new System.Drawing.Imaging.EncoderParameters();
        ep.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)level);

        System.IO.MemoryStream ms = new System.IO.MemoryStream();
        bm.Save(ms, ici, ep);
        Response.ClearContent();
        Response.BinaryWrite(ms.ToArray());
        Response.ContentType = "image/jpeg";//指定输出格式为图形

        Response.Flush();
    }
    catch (Exception e)
    {
        Response.Write(e.ToString());
    }

%>

中间过程中,用到的Flex文件上传代码:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical" verticalAlign="middle" horizontalAlign="center">

 <mx:Style>
  global {
   fontSize : 14;
  }
 </mx:Style>
 
 <mx:Script>
  <![CDATA[
   import mx.effects.Zoom;
   import mx.controls.Image;
   // 先搞 1 个 FileReference
   private var file:FileReference = new FileReference();
   
   // 上传状态指示, 和下面的文本框绑定
   [Bindable]
   private var stateText:String = "请选择一个文件上传";
   
   // createChildren 比 creationComplete 事件更早发生, 省的注册事件侦听, 直接在这里写了
   protected override function createChildren():void {
    super.createChildren();
    file.addEventListener(Event.SELECT, file_select);
    file.addEventListener(Event.COMPLETE, file_complete);
    file.addEventListener(ProgressEvent.PROGRESS, file_progress);
   }
   
   // 选择 1 个文件的事件
   private function file_select (e:Event):void {
    stateText = "选择了文件 " + file.name;
   }
   
   // 上传完毕后的事件
   private function file_complete (e:Event):void {
    stateText = "上传完毕";
   }
   
   private function file_progress (e:ProgressEvent):void {
    stateText = "已上传 " + Math.round(100 * e.bytesLoaded / e.bytesTotal) + "%";
   }
   // 先判断一下文件大小, 再上传, FileService.aspx 就是上传地址
   private function upload ():void {
    if (file.size > 0) {
     stateText = "正在上传 " + file.name;
     var request:URLRequest = new URLRequest("FileService.asp");
     file.upload(request);
     
    }
   }
   
   
  ]]>
 </mx:Script>
 
 <mx:Panel width="250" height="112" layout="vertical" title="上传示例"
  verticalAlign="middle" horizontalAlign="center" >
  <mx:HBox>
   <mx:TextInput text="{stateText}" width="160" editable="false"/>
   <mx:Button label="浏览" click="file.browse();"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button label="上传" click="upload();"/>
  </mx:HBox>
 </mx:Panel>
</mx:Application>
其中,FileService.asp使用了无组件上传技术,其实也可以用FileService.aspx来代替,只要一般的网页上的file能上传就可以.