简体   繁体   中英

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\"/>";
    System.out.println(imageData);
    jsonObjectHtmlReport.addProperty("TestStepDescription", imgTag);
    jsonObjectHtmlReport.addProperty("TestStepResult","PASSED");
    jsonHtmlDataHelper.AddProperty(jsonObjectHtmlReport);
}  

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=\"$.fancybox.open({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\"/>;

just tag with href link will open blank page. You need add download="namefile.png" into <a>

So it will look like this: <a href="data:image/png;base64,..." download="abrakadabra_iLoveCats.jpg">download id</a>

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>";

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM