Display base64 string image as a hyperlink

Question

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

Solution 1

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

Solution 2

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>

Comments

[HarrisJT]

Cant you modify your imgTag string to be surrounded by an <a> tag?

[WEBjuju]

create a server side (java) uri which will read out the image and print it to the browser

[Vic]

it is a plain .htm file and it is not hosted on the server.

[Vic]

@HarrisJT : could you please explain what you mean by surrounding string by <a> tag?

[HarrisJT]

@Vic you want to link the image to redirect to just that image? Without having it stored just have imgTag="<a href=\""+imageData+"\">" + <img src=\"data:image/png;base64, " + imageData + "\" width=\"200\" height=\"150\"/></a>";

[Vic]

@HarrisJT. The following code worked for me; String imgTag = "<a href=\"data:image/png;base64,"+imageData+"\">View Image</a>";

[HarrisJT]

@Vic that's what I was getting at, glad you figured it out!

[Dmitriy Vinokurov]

Thanks for answer. I'm trying to use it in my React project and wrote following code - <a target='_blank' href={'data:image/jpg;base64,' + this.state.schemeImageBase64}><img width='500px' src={'data:image/jpg;base64,' + this.state.schemeImageBase64}/></a>. Image is shown correctly, cursor icon is shown as it is for links, but when I click image - nothing happens, only console shows error "Not allowed to navigate top frame to data URL". Solved by opening new tab with base64 image using JavaScript - stackoverflow.com/a/46672702/1927853