zoukankan      html  css  js  c++  java
  • [收藏]生成整齐,美观的缩略图

    需求:电子商务中有大量的图片要丰前台显示,而这些图片大部分由客户自己上传,图片的规格也是多种多样(主要择时纵横比例)。怎样让这些图片在前台整齐且美观的显示呢?

    目的:整齐:固定纵横比例;美观:图片不变型,也就是按比例缩放。

    假设:假如我们要在前台的一个Div(别名:相框)中放一张图(别名:图A),相框的宽度为120px,高度为:90px。而图A的原图的宽度为为1414px,高度为:886px.
    显然相框与图A的原图的比例不一致。为了整齐且美观,我们希望将图A处理成56*96.然后把她居中的放在相框(120*90)中。

    方案:我们采用.net技术,通过GDI操作图片:

    实施:不想多说(相信大家都应该看得懂)先贴出我的图像处理类(注释还算清楚):


    using System;
    using System.Drawing;
    using System.IO;

    namespace Ants.Tools
    {
        public class Image
        {
            属性#region 属性
            /**//// <summary>
            /// 相框的宽度
            /// </summary>
            public int Width { get; set; }
            /**//// <summary>
            /// 相框的高度
            /// </summary>
            public int Height { get; set; }
            /**//// <summary>
            /// 待处理的图片的物理路径
            /// </summary>
            public string Path { get; set; }
            #endregion

            private bool ThumbnailCallBack()//GDI+委托
            {
                return false;
            }
            /**//// <summary>
            /// 缩略图片的函数
            /// </summary>
            /// <param name="OK">用来判断转换是否成功</param>
            /// <returns>处理好的图片缩略图放入内存中</returns>
            public MemoryStream getThumb(out bool OK)
            {
                OK=false;
                int X, Y;
                System.Drawing.Image myThumbnail = null;
                try
                {
                    Bitmap myBitmap = new Bitmap(Path);
                    X = myBitmap.Width;
                    Y = myBitmap.Height;
                    decimal a = (decimal)X / (decimal)Y;//原图片的比例
                    decimal b = (decimal)Width / (decimal)Height;//相框的比例
                    System.Drawing.Image.GetThumbnailImageAbort myCallBack = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallBack);
                   
                    int newheight, newwidth;
                    if (b > a)
                    {
                        newheight = Height;
                        newwidth =(int) decimal.Round(newheight * a,0,MidpointRounding.AwayFromZero);
                    }
                    else
                    {
                        newwidth = Width;
                        newheight = (int)decimal.Round(Width / a, 0, MidpointRounding.AwayFromZero);

                    }
                    myThumbnail = myBitmap.GetThumbnailImage(newwidth, newheight, myCallBack, IntPtr.Zero);//生成缩略图
                   OK=true;
                   myBitmap.Dispose();              
                }
                catch
                {
                    OK= false;
                }
                System.IO.MemoryStream ms = new System.IO.MemoryStream();
                myThumbnail.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
             
                return ms;
            }
        }
    }

    如何应用此类呢?还是贴代码:
    1.新建一个aspx页面,放一个<img>标签
    代码如下:


    Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ants.Tools.WebForm1" %>

    <!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 runat="server">
        <title>无标题页</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div style="border: 1px solid  black; 120px; height:90px; text-align:center;  vertical-align:middle">
        <img src="Handler1.ashx?path=d:\3.jpg&width=120&height=90" alt="" />
        </div>
        <br />
        <div style="border: 1px solid  black; 120px; height:90px; text-align:center;  vertical-align:middle">
        <img src="Handler1.ashx?path=d:\2.jpg&width=120&height=90" alt="" />
        </div>
        </div>
        </form>
    </body>
    </html>


    2.再建一个ashx文件
    代码如下:


    Code
    using System.Web;

    namespace Ants.Tools
    {
        public class Handler1 : IHttpHandler
        {

            public void ProcessRequest(HttpContext context)
            {
                Image img = new Image();
                img.Path = context.Request.QueryString["path"].ToString();
                img.Width = context.Request.QueryString["width"].ToString().ToInt32();
                img.Height = context.Request.QueryString["height"].ToString().ToInt32();
                bool ok = false;
                System.IO.MemoryStream ms= img.getThumb(out ok);
                if(ok)
                context.Response.BinaryWrite(ms.ToArray());
              
            }

            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

     

  • 相关阅读:
    庖丁解牛识控件
    打开地图文件和shape文件代码加载Mxd文档
    IMapControl3 Interface(1) Properties属性
    避免事件响应传递依赖
    提示:ArcGIS version not specified. You must call RuntimeManager.Bind before creating any ArcGIS components.错误
    我的联想笔记本电脑为啥字母键变成数字键怎么切换过来
    C#读取word文件
    TensorFlow笔记(基础篇):加载数据之预加载数据与填充数据
    7.1 TensorFlow笔记(基础篇):加载数据之预加载数据与填充数据
    7.2 TensorFlow笔记(基础篇): 生成TFRecords文件
  • 原文地址:https://www.cnblogs.com/ggbbeyou/p/1356801.html
Copyright © 2011-2022 走看看