因为项目需要,需实现图片的前台快速浏览与后台合成,在网上吸取众家经验最终实现功能,现将心得与其中主要代码共享一下.
前台部分代码:
window.onload = function()
{
document.getElementById("FileUpload1").attachEvent("onchange", showimg, false);
}
function showimg()
{
document.getElementById("img").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById;
}
图片的上传采用vs中的FileUpload控件,在客户端中可以直接用js取得其值,并为其添加onchange事件.
这里要注意一下showing()函数,本来在IE6中直接使用document.getElementById("img").src=document.getElementById("FileUpload1").value即可实现图片的即时浏览,但是在IE7中,安全性被加强,不允许在js中直接为img.src赋值,所以我们用了Microsoft提供的AlphaImageLoader的技术.
还在记得在添加一个样式如下
#img {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
后台合成部分代码:
System.Drawing.Image image = System.Drawing.Image.FromFile(path);
System.Drawing.Image copyImage = System.Drawing.Image.FromFile(path2);
Graphics g = Graphics.FromImage(image);
//按指定参数绘制前景图片于背景图片上(执行合成操作)
g.DrawImage(copyImage, new Rectangle(imgX, imgY, imgW, imgH), 0, 0, copyImage.Width, copyImage.Height, GraphicsUnit.Pixel);
//按Jpeg格式保存合成的图片于path3位置
image.Save(path3, System.Drawing.Imaging.ImageFormat.Jpeg);
这里,我是取得客户端FileUpload控件上传的图片的地址及名称(我的上传图片名是用一个取数据库表ID最大值+1的类计算出来的) ，当然，我们还得取得客户端传来的图片的大小及合成时两个图片的相对位置（这是一个js的小技巧，不难掌握），通过Graphics类前前景图片按指定参数绘制于背景图片上完成合成图片的操作．
目前我的项目还没有涉及到透明色的问题，Gif图片的问题，所以还没有办法完成gif图片的处理．但是网上已经有了解决的方法．还有刚开始时image.save()方法总是报GDI+的一般性错误，网上都说是权限问题，我的问题是路径写的有问题，因为毕竟不是直接写的路径，通过调试追踪变量发现是路径问题．
对了，忘记说了，前台的js中的参数我是通过隐藏控件传给后台的．有兴趣的朋友可以对此进一步扩展，我开始想做出一个这样的自定义控件的，等有时间再做吧！