多图片生成缩略图组合---分不够可以再加
需求是这样的，有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 />
<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;
}
}