將DIV內容轉換爲C＃或JavaScript中的圖像

我有一個DIV容器，它具有一些文本，背景圖像和圖像。我需要將整個DIV內容轉換爲圖像並保存到本地文件夾中。請指導我如何使用JavaScript或C＃將Div內容轉換爲圖像。我在Google中搜索過，但沒有得到正確的結果。請給出一些源代碼..幫助我們。將DIV內容轉換爲C＃或JavaScript中的圖像

來源

2012-05-10 ganesh m

看看http://stackoverflow.com/questions/2316564/taking-screenshot-of-a-webpage-programmatically。 – rt2800

@ rt2800答案是爲了捕捉整個網頁，他正在尋找特殊的Div來捕獲 –

由於您不想轉換整個HTML頁面，而是html的一部分，請參閱p.campbell在以下鏈接中給出的答案以獲得完美的解決方案。

Convert a HTML Control (Div or Table) to an image using C#

其他答案也許提供捕捉整個HTML網頁圖像。如果您發現p.campbell的答案很難實現，請在網站中創建一個只有Div內容的html頁面，並通過給出其他答案將其捕獲到圖像。

來源

2012-05-10 07:35:57

對不起Imran Rizvi ..我不清楚它是如何工作的。請你用源代碼詳細說明我？ –

它需要截圖的URL。我只想要一個div內容到Image。 –

你看到p.campbell的第二個答案了嗎？ –

http://html2canvas.hertzen.com/是你在找什麼。用法：

HTML：

<head> 
    <title>Example of capturing the div</title> 
</head> 
<body> 
    <div id="pictureMe"><p>Try this out on JSFiddle right now.</p></div> 
    <script src="js/html2canvas.js" type="text/css" rel="stylesheet"></script> 
    <script type="text/javascript"> 
      html2canvas(document.getElementByID("pictureMe"), { 
      onrendered: function(canvas) { 
      /* What you want to do with the screenshot goes here */ 
      document.body.appendChild(canvas); 
      } 
     }); 
    </script> 
</body>

http://jsfiddle.net/fG4fY/現已推出。

來源

2013-07-09 14:04:31

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script> 
    <script type="text/javascript"> 
     function ConvertToCanvas(btnExporttoimage) { 
      html2canvas($("#ContentInfo")[0]).then(function (canvas) { 
       var base64 = canvas.toDataURL(); 
       $("[id*=hdnImageData]").val(base64); 
       __doPostBack(btnExporttoimage.name, ""); 
      }); 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="ContentInfo" runat="server" style="width: 600px; background-color: White; 
     padding: 5px; height: 600px;"> 
     <u>Student Info</u> 
     <br /> 
     <br /> 
     <table> 
      <tr> 
       <td> 
        ID 
       </td> 
       <td> 
        Name 
       </td> 
       <td> 
        Country 
       </td> 
       <td class="style1"> 
        Roll. 
       </td> 
      </tr> 
      <tr> 
       <td> 
        1 
       </td> 
       <td> 
        Ranjit 
       </td> 
       <td> 
        India 
       </td> 
       <td class="style1"> 
        2345 
       </td> 
      </tr> 
      <tr> 
       <td> 
        2 
       </td> 
       <td> 
        Soumya 
       </td> 
       <td> 
        India 
       </td> 
       <td class="style1"> 
        5678 
       </td> 
      </tr> 
      <tr> 
       <td> 
        3 
       </td> 
       <td> 
        Tapan 
       </td> 
       <td> 
        Srilanka 
       </td> 
       <td class="style1"> 
        7890 
       </td> 
      </tr> 
      <tr> 
       <td> 
        4 
       </td> 
       <td> 
        Suresh 
       </td> 
       <td> 
        Bhutan 
       </td> 
       <td class="style1"> 
        4345 
       </td> 
      </tr> 
     </table> 
    </div> 
    <br /> 
    <asp:HiddenField ID="hdnImageData" runat="server" /> 
    <asp:Button ID="btnExporttoimage" Text="Export to Image" runat="server" UseSubmitBehavior="false" 
     OnClientClick="return ConvertToCanvas(this)" OnClick="btnExporttoimage_Click" /> 
    </form> 
</body> 
</html> 


using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.IO; 
using System.Drawing.Imaging; 

public override void VerifyRenderingInServerForm(Control control) 
{ 
    /* Verifies that the control is rendered */ 
} 

protected void btnExporttoimage_Click(object sender, EventArgs e) 
{ 
    string base64 = Request.Form[hdnImageData.UniqueID].Split(',')[1]; 
    byte[] IMGbytes = Convert.FromBase64String(base64); 

    ///////////-------FOLLOWING CODE IS TO CONVERT IMAGE TO BINARY AND TO DEFAULT DOWNLOAD PATH--------//////////////////// 
    //Response.Clear(); 
    //Response.ContentType = "image/png"; 
    //Response.AddHeader("Content-Disposition","canvas.png")); 
    //Response.Buffer = true; 
    //Response.Cache.SetCacheability(HttpCacheability.NoCache); 
    //Response.BinaryWrite(IMGbytes); 
    //Response.End(); 


    ///////////-------FOLLOWING CODE IS TO CONVERT IMAGE TO BINARY AND TO DESIRE DOWNLOAD PATH--------//////////////////// 
    MemoryStream msImage = new MemoryStream(IMGbytes, 0, IMGbytes.Length); 
    msImage.Write(IMGbytes, 0, IMGbytes.Length); 
    System.Drawing.Image imageTosave = System.Drawing.Image.FromStream(msImage, true); 
    string filePath = Path.Combine(Server.MapPath("~/CanvasImages/"), "canvas.png"); 
    imageTosave.Save(filePath, ImageFormat.Png); 
}

來源

2015-07-04 12:45:10

將DIV內容轉換爲C＃或JavaScript中的圖像

回答

相關問題