首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

多图片生成缩略图结合-分不够可以再加

2013-07-16 
多图片生成缩略图组合---分不够可以再加需求是这样的,有1-5张图片数量不定 要生成一个图片。图片布局如下:

多图片生成缩略图组合---分不够可以再加
需求是这样的,有1-5张图片数量不定 要生成一个图片。图片布局如下:多图片生成缩略图结合-分不够可以再加
规则是传递第一张图显示最大的图片230*180 下面4张图分别是2,3,4,5张图57*57 如果没有2或3或4或5图位置就空着,图片背景图透明色。  请问各位 如果实现这样的功能?   谢谢   
规则是传递第一张图显示最大的图片230*180 下面4张图分别是2,3,4,5张图57*57 如果没有2或3或4或5图位置就空着,图片背景图透明色。  请问各位 如果实现这样的功能?   谢谢   
刚做的 IE有效
aspx html代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        //FX获取文件路径方法 
        function readFileFirefox(fileBrowser) {
            try {
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            }
            catch (e) {
                alert('无法访问本地文件,由于浏览器安全设置。为了克服这一点,请按照下列步骤操作:(1)在地址栏输入"about:config";(2) 右键点击并选择 New->Boolean; (3) 输入"signed.applets.codebase_principal_support" (不含引号)作为一个新的首选项的名称;(4) 点击OK并试着重新加载文件');
                return;
            }
            var fileName = fileBrowser.value; //这一步就能得到客户端完整路径。下面的是否判断的太复杂,还有下面得到ie的也很复杂。 
            var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);


            try {
                // Back slashes for windows 
                file.initWithPath(fileName.replace(/\//g, "\\\"));
            }
            catch (e) {
                if (e.result != Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
                alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file.");
                return;
            }
            if (file.exists() == false) {
                alert("File '" + fileName + "' not found.");
                return;
            }
            return file.path;
        }
        //根据不同浏览器获取路径 
        function getvl(obj) {
            //判断浏览器 
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;


            var file_url = "";
            if (Sys.ie <= "6.0") {
                //ie5.5,ie6.0 
                file_url = obj.value;
            } else if (Sys.ie >= "7.0") {
                //ie7,ie8 
                var file = obj;
                file.select();
                file_url = document.selection.createRange().text;
            } else if (Sys.firefox) {
                //fx 
                //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串 
                file_url = readFileFirefox(obj);
            }
            //alert(file_url);
            return file_url;
        }



        function getewm() {
            var nr = getvl(document.getElementById("File"));
            var nr1 = getvl(document.getElementById("File1"));
            var nr2 = getvl(document.getElementById("File2"));
            var nr3 = getvl(document.getElementById("File3"));
            var nr4 = getvl(document.getElementById("File4"));
            var xinname = nr + "$" + nr1 + "$" + nr2 + "$" + nr3 + "$" + nr4;


            alert(xinname);
            document.getElementById("ewmimage").innerHTML = "<img src='tupian.ashx?nameurl=" + xinname + "' width='230px' height='237px'/>";

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="File" type="file" runat="server" />
        <br />
        <input id="File1" type="file" runat="server" />
        <br />
        <input id="File2" type="file" runat="server" />
        <br />
        <input id="File3" type="file" runat="server" />
        <br />
        <input id="File4" type="file" runat="server" />
        <br />
        <br />
        <br />
        <br />
        &nbsp;&nbsp;
        <input id="dianji" onclick="getewm()" type="button" value="生成图片" /><br />
        <br />
        <div id="ewmimage">
        </div>
    </div>
    </form>
</body>
</html>



这个是一盘处理程序:就是用来处理5个路径生成图片:方法在里面:
你可以自己去揣摩:
tupian.ashx:
 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            getewm(context);
        }


        /// <summary>
        /// 获取图片


        /// </summary>
        /// <param name="context"></param>
        private void getewm(HttpContext context)
        {
            string content = context.Request.QueryString["nameurl"];
            string[] urls = content.Split('$');
            System.Drawing.Image image = HeBing(urls[0], urls[1], urls[2], urls[3], urls[4]);
            Graphics g = Graphics.FromImage(image);
            try
            {
                System.IO.MemoryStream ms = new System.IO.MemoryStream();
                image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
                context.Response.ClearContent();
                context.Response.ContentType = "image/Gif";
                context.Response.BinaryWrite(ms.ToArray());
            }
            finally
            {
                g.Dispose();
                image.Dispose();
            }
        }


        /// <summary>  
        /// Resize图片  
        /// </summary>  
        /// <param name="bmp">原始Bitmap</param>  
        /// <param name="newW">新的宽度</param>  
        /// <param name="newH">新的高度</param>  


        /// <param name="Mode">保留着,暂时未用</param>  
        /// <returns>处理以后的图片</returns>  
        public System.Drawing.Image KiResizeImage(System.Drawing.Image bmp, int newW, int newH, int Mode)
        {
            try
            {
                System.Drawing.Image b = new Bitmap(newW, newH);
                Graphics g = Graphics.FromImage(b);

                // 插值算法的质量  
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;

                g.DrawImage(bmp, new Rectangle(0, 0, newW, newH), new Rectangle(0, 0, bmp.Width, bmp.Height), GraphicsUnit.Pixel);
                g.Dispose();

                return b;
            }
            catch
            {
                return null;
            }
        }

        /// <summary>
        /// 主要方法
        /// </summary>
        /// <param name="ur0">图片路径</param>
        /// <param name="ur1"></param>
        /// <param name="ur2"></param>
        /// <param name="ur3"></param>
        /// <param name="ur4"></param>


        /// <returns></returns>
        private System.Drawing.Image HeBing(string ur0, string ur1, string ur2, string ur3, string ur4)
        {
            System.Drawing.Image img0 = System.Drawing.Image.FromFile(ur0);
            System.Drawing.Image img1 = System.Drawing.Image.FromFile(ur1);
            System.Drawing.Image img2 = System.Drawing.Image.FromFile(ur2);
            System.Drawing.Image img3 = System.Drawing.Image.FromFile(ur3);
            System.Drawing.Image img4 = System.Drawing.Image.FromFile(ur4);
            img0 = KiResizeImage(img0, 230, 237, 0);
            img1 = KiResizeImage(img1, 57, 57, 0);
            img2 = KiResizeImage(img2, 57, 57, 0);
            img3 = KiResizeImage(img3, 57, 57, 0);
            img4 = KiResizeImage(img4, 57, 57, 0);

            Graphics g = Graphics.FromImage(img0);

            g.DrawImage(img0, 0, 0, img0.Width, img0.Height);
            g.DrawImage(img1, 0, 180, img1.Width, img1.Height);
            g.DrawImage(img2, 58, 180, img2.Width, img2.Height);
            g.DrawImage(img3, 116, 180, img3.Width, img3.Height);
            g.DrawImage(img4, 174, 180, img4.Width, img4.Height);
            GC.Collect();

            return img0;

        }
        
        public bool IsReusable


        {
            get
            {
                return false;
            }
        }

热点排行