一键生成长微博

最近由于产品的需求，需要做一个类似于长微博的功能，就是把文章内容转换为一张图片，再通过分享平台把图片分享出去。主要用到的就是html页面截取成图片的方法，在这里和大家分享一下：

 

效果图：

点击：

 

生成对应文章的长微博：

 

 

 

主要技术实现：

 

创建一个模板页 ，用于查询文章的内容和展示，为生成图片做基础，其次就是转换图片了

 

方法调用：

 public static string saveimage(string imagename, string channelId)     {        

string url = string.Empty;      

   try         {            

           url = "模板路径" + imagename;

            Bitmap m_Bitmap = Images.GetWebSiteThumbnail(url, 520, 600, 520, 600);  //参数传递  模板地址  画板宽度 画板高度（没用到，下文解释）  页面宽度  页面高度（没用到）

            m_Bitmap.Save(ImagePath + channelId + "\\" + imagename + ".png", System.Drawing.Imaging.ImageFormat.Png);//JPG、GIF、PNG等均可

            m_Bitmap.Dispose();

            return "";         }         catch (Exception ex)  

       {

            return ex.ToString();       

　　  }             

  }

 

页面转换图片类：

主要介绍一下这里的根据文章高度来判断页面高度的思想

body.scrollHeight  获取模板的高度 来定义画板的高度最后生成图片

方法：

 IHTMLElement2 body = m_WebBrowser.Document.Body.DomElement as IHTMLElement2;
            int height = body.scrollHeight;

代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Drawing;

using System.Threading; using System.Windows.Forms; using mshtml;

namespace SequeMedia.CMS.changweibo

{    

public class Images   

  {

        Bitmap m_Bitmap;     

       string m_Url;      

        int m_BrowserWidth, m_BrowserHeight, m_ThumbnailWidth, m_ThumbnailHeight;  

       public  Images(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)   

      {          

    m_Url = Url;         

    m_BrowserHeight = BrowserHeight;          

    m_BrowserWidth = BrowserWidth;         

    m_ThumbnailWidth = ThumbnailWidth;       

    m_ThumbnailHeight = ThumbnailHeight;      

   }       

    public static Bitmap GetWebSiteThumbnail(string Url, int BrowserWidth, int BrowserHeight, int ThumbnailWidth, int ThumbnailHeight)       

  {

            //Images.WriteLog(" GetWebSiteThumbnail开始" + DateTime.Now.ToString() + ":" + DateTime.Now.Millisecond + "\t ");

            Images thumbnailGenerator = new Images(Url, BrowserWidth, BrowserHeight, ThumbnailWidth, ThumbnailHeight);  

           return thumbnailGenerator.GenerateWebSiteThumbnailImage();

        }       

  public Bitmap GenerateWebSiteThumbnailImage()       

  {                    

      // Images.WriteLog(" GenerateWebSiteThumbnailImage开始" + DateTime.Now.ToString() + ":" + DateTime.Now.Millisecond + "\t ");

        Thread m_thread = new Thread(new ThreadStart(_GenerateWebSiteThumbnailImage));  

         m_thread.SetApartmentState(ApartmentState.STA);           

         m_thread.Start();     

         m_thread.Join();        

         return m_Bitmap;        

}        

     private void _GenerateWebSiteThumbnailImage()   

       {

           // Images.WriteLog(" GetWebSiteThumbnail开始" + DateTime.Now.ToString() + ":" + DateTime.Now.Millisecond + "\t ");       

      WebBrowser m_WebBrowser = new WebBrowser();         

    m_WebBrowser.ScrollBarsEnabled = false;        

     m_WebBrowser.Navigate(m_Url);        

     m_WebBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(WebBrowser_DocumentCompleted);         

    while (m_WebBrowser.ReadyState != WebBrowserReadyState.Complete)           

      Application.DoEvents();        

     m_WebBrowser.Dispose();     

    }      

   private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)       

  {

            //Images.WriteLog(" GetWebSiteThumbnail开始" + DateTime.Now.ToString() + ":" + DateTime.Now.Millisecond + "\t ");

            WebBrowser m_WebBrowser = (WebBrowser)sender;     

        IHTMLElement2 body = m_WebBrowser.Document.Body.DomElement as IHTMLElement2;     

        int height = body.scrollHeight;       

      m_WebBrowser.ClientSize = new Size(this.m_BrowserWidth, height);      

       m_WebBrowser.ScrollBarsEnabled = false;       

      m_Bitmap = new Bitmap(m_WebBrowser.Bounds.Width, height);      

       m_WebBrowser.BringToFront();        

     m_WebBrowser.DrawToBitmap(m_Bitmap, m_WebBrowser.Bounds);   

          m_Bitmap = (Bitmap)m_Bitmap.GetThumbnailImage(m_ThumbnailWidth, height, null, IntPtr.Zero);   

      }

        /// <summary>         /// 写入log日志         /// </summary>    

     /// <param name="info">日志信息</param>   

      public static void WriteLog(string info)     

    {            

   System.IO.File.AppendAllText("\\cms.tsmc.com\\root\\cmsdata\\cmsimages\\aaab\\weiboimage\\12\\" + DateTime.Now.ToShortDateString() + ".txt",info);

        }

    }

 

}

 

 

 

得到图片流之后保存下来

 

Bitmap m_Bitmap = Images.GetWebSiteThumbnail(url, 520, 600, 520, 600);

            m_Bitmap.Save(ImagePath + channelId + "\\" + imagename + ".png", System.Drawing.Imaging.ImageFormat.Png);//JPG、GIF、PNG等均可

            m_Bitmap.Dispose();

            return "";

 

 

最后：

 

js：

 

 
<script type='text/javascript'>
    window.onload = function () {
        var img = document.getElementById('img');
        var src = img.getAttribute('src');
        img.setAttribute('src', '');
        img.onload = function () {
            document.getElementById('jia').style.display = "none";
        };
        img.setAttribute('src', src);
    };
</script>

 

 

 

 

图片完全展示之后 ……

 

 

 

 

整个实现思路主要就是html页面转换为图片的过程已经判断页面高度这一难点，如有不足请指正！