.NET实现图片大小调整和多图合并拼接

.NET实现多图合并拼接

产品要在邮件中添加一张广告图片,图片由一张动态二维码和一张背景图片组成。一开始时想了两个方法:
  1. 用html和css的方式来实现
  2. 采用.net后台重新绘制图片的方式

对方法二自己并不是很了解,所以起初用html和css的方式进行了很多次尝试,最终结果是无法实现。原因是邮箱对margin,top等css的支持较差或不支持。
最后只能采用.net后台拼图的方式来实现,起初以为会很烦所以一开始并不想用这种方式。但是做下来发现还是挺简单的,因为微软提供了很方便的api。
1. 新建一个web项目,添加一个名为“Imgs”的文件夹来存放合并后的图片。
2. 前台代码:

    <p>
        <asp:Button ID="Button1" runat="server" Text="合并图片" onclick="Button1_Click" />
    </p>
    <div>
        <asp:Image ID="Image1" runat="server" />
    </div>
  1. 后台代码:
protected void Button1_Click(object sender, EventArgs e)
{
    string bgPath = DownloadImg("https://www.baidu.com/img/bd_logo1.png","bg.png");
    string qrPath = DownloadImg("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png","qr.png");
    ////调整图像大小
    Bitmap b = new Bitmap(bgPath);
    System.Drawing.Image i = resizeImage(b, new Size(270, 129));
    string rePath = Server.MapPath("Imgs") + "\\rebg.png";
    i.Save(rePath);
    i.Dispose();
    MergeImage(rePath, qrPath);
    Image1.ImageUrl = "Imgs/new.jpg";
}
//下载图片
private string DownloadImg(string strPath,string strName) {
    WebClient my = new WebClient();
    byte[] mybyte;
    mybyte = my.DownloadData(strPath); 
    MemoryStream ms = new MemoryStream(mybyte);
    System.Drawing.Image img;
    img = System.Drawing.Image.FromStream(ms);
    string filePath = Server.MapPath("Imgs") + "\\" +strName;
    img.Save(filePath, ImageFormat.Png);   //保存
    return filePath;
}
//拼图函数
private void MergeImage(string strBg, string strQr)
{ 
    // 数组元素个数(即要拼图的图片个数)
    int lenth = 2;
    // 图片集合
    Bitmap[] maps = new Bitmap[lenth];
    //图片对应纵座标集合
    int[] pointY = new int[lenth];
    //读取本地图片初始化Bitmap
    Bitmap map = null;

    //第一个图片对象,背景图片
    map = new Bitmap(strBg);
    maps[0] = map;
    pointY[0] = 0;
    //第二个图片对象,二维码
    map = new Bitmap(strQr);
    maps[1] = map;
    pointY[1] = 53;
    // 初始化背景图片的宽高
    Bitmap bitMap = new Bitmap(270, 129);
    // 初始化画板
    Graphics g1 = Graphics.FromImage(bitMap);
    ////设置画布背景颜色为白色
    //g1.FillRectangle(Brushes.White, new Rectangle(80, 45, 160, 125));
    //绘制第一个图片,背景图
    for (int i = 0; i < maps[0].Width; i++)
    {
        for (int j = 0; j < maps[0].Height; j++)
        {
            // 以像素点形式绘制(将要拼图的图片上的每个座标点绘制到拼图对象的指定位置,直至所有点都绘制完成)
            var temp = maps[0].GetPixel(i, j);
            // 将图片画布的点绘制到整体画布的指定位置
            bitMap.SetPixel(i, pointY[0] + j, temp);
        }
    }
    maps[0].Dispose();
    //绘制第二个图片,一个白色边框
    g1.FillRectangle(Brushes.LightGreen, new Rectangle(100, 48, 70, 70));
    //绘制第三个图片,二维码
    for (int i = 0; i < maps[1].Width; i++)
    {
        for (int j = 0; j < maps[1].Height; j++)
        {
            var temp = maps[1].GetPixel(i, j);
            bitMap.SetPixel(105 + i, pointY[1] + j, temp);
        }
    }
    maps[1].Dispose();
    // 保存输出到本地
    bitMap.Save(Server.MapPath("Imgs") + "/new.jpg");
    g1.Dispose();
    bitMap.Dispose();
}
//调整图像大小
private static System.Drawing.Image resizeImage(System.Drawing.Image imgToResize, Size size)
{
    //获取图片宽度
    int sourceWidth = imgToResize.Width;
    //获取图片高度
    int sourceHeight = imgToResize.Height;

    float nPercent = 0;
    float nPercentW = 0;
    float nPercentH = 0;
    //计算宽度的缩放比例
    nPercentW = ((float)size.Width / (float)sourceWidth);
    //计算高度的缩放比例
    nPercentH = ((float)size.Height / (float)sourceHeight);

    if (nPercentH < nPercentW)
        nPercent = nPercentH;
    else
        nPercent = nPercentW;
    //期望的宽度
    int destWidth = (int)(sourceWidth * nPercent);
    //期望的高度
    int destHeight = (int)(sourceHeight * nPercent);

    Bitmap b = new Bitmap(destWidth, destHeight);
    Graphics g = Graphics.FromImage((System.Drawing.Image)b);
    g.InterpolationMode = InterpolationMode.HighQualityBicubic;
    //绘制图像
    g.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
    g.Dispose();
    imgToResize.Dispose();
    return (System.Drawing.Image)b;
}

后台代码的主要逻辑:
这里采用了直接从网络上下载图片到本地,然后对图片进行和并的方式。
效果截图:
结果截图

http://blog.5lzy.com/Blog/Index/ViewEntity?code=WZ000019
http://blog.csdn.net/hesi9555/article/details/70255065

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章