Asked by:
Html Embedding For Image
Question
-
Hi everyone ,
i need to embed an image to my html using c# , i am not able to see the image by using this code . i tried hard to understand why this code is not working for me .its just showing box as i have given width and height in my html tag. to understand the problem i am giving sample code which you can replace you main.xaml.cs and xaml code. and please put one image in your TemporaryFolder and give the same url in my hardcoded value .
public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); this.dataMailTransferManager = DataTransferManager.GetForCurrentView(); this.dataMailTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.ShareStorageItemsHandlerSurveysViewModel); } private void Button_Click(object sender, RoutedEventArgs e) { EmailSurvey(); } public async Task<string> EmailSurvey() { try { List<data> LstSrvMdl = new List<data>(); for (int j = 0; j < 10; j++) { data objdata = new data(); objdata.qustext = "Q" + j.ToString(); objdata.ansctrl = "A"; objdata.anstext = "A" + j.ToString(); LstSrvMdl.Add(objdata); } data objdata1 = new data(); objdata1.qustext = "Image?"; objdata1.ansctrl = "CAMERA"; objdata1.anstext = @"file:///C:/Users/shivam.b/AppData/Local/Packages/1a33278d-27b4-49a8-a70f-075267371589_7dwhqdayv2ttc/TempState/picture007.jpg"; //Please give your Image Path here to test LstSrvMdl.Add(objdata1); StringBuilder htmlBuilder = new StringBuilder(); htmlcontentgenerated = string.Empty; htmlBuilder.Clear(); htmlBuilder.Append("<HTML>"); htmlBuilder.Append("<head>"); htmlBuilder.Append("<title>" +" Confirmation Email "+ "</title>"); htmlBuilder.Append("<style type=\"text/css\">"); htmlBuilder.Append(".style1"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 48px;"); htmlBuilder.Append("}"); htmlBuilder.Append(".style2"); htmlBuilder.Append("{"); htmlBuilder.Append("}"); htmlBuilder.Append(".style3"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 176px;"); htmlBuilder.Append("}"); htmlBuilder.Append(".style4"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 159px;"); htmlBuilder.Append("}"); htmlBuilder.Append(".style5"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 132px;"); htmlBuilder.Append("}"); htmlBuilder.Append(".style6"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 151px;"); htmlBuilder.Append("}"); htmlBuilder.Append(".style7"); htmlBuilder.Append("{"); htmlBuilder.Append("width: 85px;"); htmlBuilder.Append("}"); htmlBuilder.Append("</style>"); htmlBuilder.Append("</head>"); htmlBuilder.Append("\n"); htmlBuilder.Append(Environment.NewLine); htmlBuilder.Append("<body>"); htmlBuilder.Append("<div>"); htmlBuilder.Append("DearCustomer "+ "</div>"); htmlBuilder.Append("<br />"); htmlBuilder.Append("<div>"); htmlBuilder.Append(" " + "We are thanksFull" + "</div>"); htmlBuilder.Append("<div style=\"font-weight: bold\">"); htmlBuilder.Append("<br />"); if (!string.IsNullOrEmpty("ABC")) htmlBuilder.Append("Customer: " + "ABC" + "-" + "ABC"); htmlBuilder.Append("<br />"); htmlBuilder.Append("Survey Type: " +"No Type Specified"); htmlBuilder.Append("<br />"); htmlBuilder.Append("Survey Name: " + "Unknown"); htmlBuilder.Append("<br />"); htmlBuilder.Append("Survey Detail: " + "Unknown"); htmlBuilder.Append("<br />"); htmlBuilder.Append("<br />"); htmlBuilder.Append("<br />"); htmlBuilder.Append("</div>"); htmlBuilder.Append("<br />"); htmlBuilder.Append("<div>"); htmlBuilder.Append("<table style=\"height: 180px; width: 934px\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\">"); htmlBuilder.Append("<tr>"); htmlBuilder.Append("<td align=\"center\" style=\"font-weight: bold\" class=\"style3\">Questions</td>"); htmlBuilder.Append("<td align=\"center\" style=\"font-weight: bold\" class=\"style4\">Answers</td>"); htmlBuilder.Append("</tr>"); int i = 0; foreach (var item in LstSrvMdl) { htmlBuilder.Append("<tr>"); htmlBuilder.Append("<td class=\"style3\" align=\"center\">" + item.qustext); htmlBuilder.Append("</td>"); if (!string.IsNullOrEmpty(item.anstext)) { if (item.ansctrl.Equals("CAMERA")) { // htmlBuilder.Append("<td class=\"style4\" align=\"center\">" + item.anstext); #region Email Image byte[] outputarray = null; string filename = string.Empty; Uri uri = new Uri(item.anstext); if (uri.IsFile) { filename = System.IO.Path.GetFileName(uri.LocalPath); } StorageFolder storageFolder = ApplicationData.Current.TemporaryFolder; var file = await storageFolder.GetFileAsync(filename); IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read); var reader = new Windows.Storage.Streams.DataReader(fileStream.GetInputStreamAt(0)); await reader.LoadAsync((uint)fileStream.Size); outputarray = new byte[fileStream.Size]; reader.ReadBytes(outputarray); string StringOutput = Convert.ToBase64String(outputarray); // htmlBuilder.Append("<img alt="" src="data:image/jpeg;base64, var imgSrc = String.Format("data:image/jpg;base64," + StringOutput); htmlBuilder.Append("<td class=\"style4\" align=\"center\">"); htmlBuilder.Append("<img alt='' border=1 height=64 width=64 src=\"" + imgSrc + "\"/>"); //htmlBuilder.Append("<img alt='' border=1 height=64 width=64 src=" + imgSrc + "/" + "\">"); htmlBuilder.Append("</td>"); #endregion } else { htmlBuilder.Append("<td class=\"style4\" align=\"center\">" + item.anstext); } } else { // String theBase64String = null; //// [theEmailBodyString appendString:[NSString stringWithFormat:@"<img src='data:image/jpeg;base64,%@'>",imageWithBase64String]]; // htmlBuilder.Append("<img src='data:image/jpeg;base64,"); // htmlBuilder.Append(theBase64String); // htmlBuilder.Append("'>"); htmlBuilder.Append("<td class=\"style4\" align=\"center\">" + ""); } htmlBuilder.Append("</td>"); htmlBuilder.Append("</tr>"); i++; } if (!string.IsNullOrEmpty(htmlBuilder.ToString())) { htmlcontentgenerated = htmlBuilder.ToString(); } else { htmlcontentgenerated = null; } await RegisterForShare(); } catch (Exception ex) { } return htmlcontentgenerated; } public async Task RegisterForShare() { try { DataTransferManager.ShowShareUI(); } catch (Exception ex) { } } private async void ShareStorageItemsHandlerSurveysViewModel(DataTransferManager sender, DataRequestedEventArgs e) { try { if (!string.IsNullOrEmpty(htmlcontentgenerated)) { string htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.CreateHtmlFormat(htmlcontentgenerated); DataPackage requestData = e.Request.Data; requestData.Properties.Title ="Email"; requestData.Properties.Description = " "; requestData.Properties.ApplicationName = "MyApp"; requestData.SetHtmlFormat(htmlFormat); } } catch (Exception ex) { } } private DataTransferManager dataMailTransferManager; public string htmlcontentgenerated = string.Empty; } public class data { public string qustext { get; set; } public string ansctrl { get; set; } public string anstext { get; set; } }here XAMl code please replace with you main grid
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Button" HorizontalAlignment="Left" Margin="528,149,0,0" VerticalAlignment="Top" Click="Button_Click"/> </Grid>
Please let me know if anyone find the issue .basically i need to know the proper tag in my image so that it will bind the base64 image to the html content .
string StringOutput = Convert.ToBase64String(outputarray); // htmlBuilder.Append("<img alt="" src="data:image/jpeg;base64, var imgSrc = String.Format("data:image/jpg;base64," + StringOutput); htmlBuilder.Append("<td class=\"style4\" align=\"center\">"); htmlBuilder.Append("<img alt='' border=1 height=64 width=64 src=\"" + imgSrc + "\"/>");
Wednesday, September 10, 2014 6:47 AM
All replies
-
Hi Shivam,
I build a project to use your code to generate the base64 string of an image. However, it works fine on my side. I can see image if I put result string into html file. I cannot reproduce your problem. I use the following code snippet.
StorageFolder InstallationFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
StorageFile file = await InstallationFolder.GetFileAsync(CountriesFile);
IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
var reader = new Windows.Storage.Streams.DataReader(fileStream.GetInputStreamAt(0));
await reader.LoadAsync((uint)fileStream.Size);
var outputarray = new byte[fileStream.Size];
reader.ReadBytes(outputarray);
string StringOutput = Convert.ToBase64String(outputarray);
var imgSrc = String.Format("data:image/jpg;base64," + StringOutput);
string html = string.Empty;
html = "<html><body><img src=\"" + imgSrc + "\"></img></body></html>";
<html><body><img src="data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAClCAYAAAA3d5OIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAANnqSURBVHhe7P3ns2VZmp+Hvff4c8+53qfPrKrurnYYi4GVREABBAGG……QmCC"></img></body></html>
Sorry I cannot paste the whole string of base64 image.
You can get my test project from OneDrive. http://1drv.ms/1whBuMn.
Please share a project to reproduce your problem. Thank you for understanding.
Regards,
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.Thursday, September 11, 2014 8:05 AMModerator -
Hi Herro worng ,
I saw the project which was on drive . its working absolutely fine and showing the image if i save the srting as .html file in some notepad . code was almost same but its not working in my string builder which i want to mail through my code .I want to understand where i am missing something. if you can find the issue please let me know .
Friday, September 12, 2014 5:45 AM
