Vic Vic - 10 months ago 93
CSS Question

Display base64 string image as a hyperlink

I am trying to display an image that is already converted into a base64 string as a link inside "a href" tag.

Java Method:

public void TakeScreenShot (String ScenarioName, String Description,JsonHtmlDataHelper jsonHtmlDataHelper)
TakesScreenshot takeScreenshotDriver = (TakesScreenshot) driver;
byte[] screenshotData = takeScreenshotDriver.getScreenshotAs(OutputType.BYTES);
JsonObject jsonObjectHtmlReport = new JsonObject();
jsonObjectHtmlReport.addProperty("ScenarioTest", ScenarioName);

String imageData = Base64.encodeBase64String(screenshotData);
String imgTag ="<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>";
jsonObjectHtmlReport.addProperty("TestStepDescription", imgTag);

The above method displays the image in HTML correctly but I want to add a link that redirects the page to the this image. According to the requirement, I cannot store the image anywhere.

I have tried the following:

<a rel=\"group\" href='#' onclick=\"${href:'data:image/png;base64," +imageData + "'})\">Click here</a>;

<a width=\"550\" height=\"190\" href=/ onclick=\"onclick=location.href=\'data:image/png;base64," + imageData + "\'\">click here</a>;

<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>;

Answer Source

You currently have this:

String imgTag ="<img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/>";

You can surround it with an <a> tag that links to the data URL:

String imgTag ="<a href=\"data:image/png;base64," + imageData + "\"><img src=\"data:image/png;base64," + imageData + "\" width=\"200\" height=\"150\"/></a>";