如何將位圖從ASP.NET傳遞到JavaScript並顯示它？

這是我的第一個ASP.NET應用程序，我無法將服務器端Bitmap對象傳遞給JavaScript客戶端。我使用SignalR來連接服務器和客戶端。如何將位圖從ASP.NET傳遞到JavaScript並顯示它？

我已經嘗試了幾件事情，希望對於有ASP.NET經驗的人來說這很容易。

這裏是我的服務器端的C＃：

public void ScreenShot() 
    { 
     Rectangle bounds = this.Bounds; 
     using (Image bitmap = new Bitmap(bounds.Width, bounds.Height)) 
     { 
      using (Graphics g = Graphics.FromImage(bitmap)) 
      { 
       g.CopyFromScreen(new Point(bounds.Left, bounds.Top), Point.Empty, bounds.Size); 
      } 

      Clients.Caller.updateImage(bitmap); 
     } 
    }

在客戶端我想要得到的位圖，它顯示：

 hubproxy.client.updateImage = function (image) { 
      var img = document.createElement("img"); 
      img.src = image; 
      document.body.appendChild(img); 
     };

我必須將它轉化成JSON對象？如果我這樣做，我怎樣才能讓它回到客戶端的圖像？

在此先感謝您的幫助。

來源

2014-10-03 Chad Dienhart

你可以圖像轉換爲字節數組：

public static byte[] ImageToByte(Image img) 
{ 
    ImageConverter converter = new ImageConverter(); 
    return (byte[])converter.ConvertTo(img, typeof(byte[])); 
}

然後它enocde爲base64 - 你可以在HTML中使用的base64圖片來源：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

另一種方法是，以節省服務器上的圖像並僅返回鏈接到服務器上的路徑，您可以使用類似GUID的名稱來生成唯一的名稱，並定期清理舊圖像或在客戶端斷開連接後進行清理等。優點是可以減少大型圖像上的網絡流量 - 您將會節省約37％的流量只發送文件名。

來源

2014-10-03 19:26:27 Giedrius

非常感謝。鑑於圖像文件仍然需要傳輸，您如何節省網絡流量？我認爲通過發送原始數據我可以節省一些時間，而不會產生將映像寫入磁盤的成本。 – 2014-10-03 19:49:31

圖像的base64表示比二進制大。 http://stackoverflow.com/questions/11402329/base64-encoded-image-size – 2014-10-04 01:33:08

你不需要寫入磁盤，你可以在內存中緩存它，並讓控制器使用GUID作爲標識符返回映像。使用SignalR發佈該GUID – Anders 2014-10-07 07:05:23

如何將位圖從ASP.NET傳遞到JavaScript並顯示它？

回答

相關問題