将base64字符串图像显示为超链接

Question

我会翻译文本。这段文字是关于编程的，需要将一个已经转换成base64字符串的图像作为链接显示在"a href"标签中。以下是Java方法：

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);
}  

上述方法可以正确在HTML中显示图像，但我想添加一个链接，将页面重定向到该图像。根据要求，我不能将图像存储在任何地方。

我尝试了以下方法：

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

- Vic

---

你能否修改你的imgTag字符串，使其被<a>标签包围吗？ - HarrisJT

创建一个服务器端（Java）URI，该URI将读取图像并将其打印到浏览器。 - WEBjuju

@HarrisJT：您能否解释一下将字符串用<a>标签包围的意思？ - Vic

@Vic，你想将图像链接到只有该图像的重定向吗？而不必存储它，只需使用imgTag="<a href=""+imageData+"">" + <img src="data:image/png;base64, " + imageData + "" width="200" height="150"/></a>"; - HarrisJT

@HarrisJT。以下代码对我有效； String imgTag = "<a href="data:image/png;base64,"+imageData+"">查看图片</a>"; - Vic

Answer 1

只有带有href链接的标签会打开空白页面。 您需要在标签中添加download="namefile.png"

因此，它将看起来像这样：<a href="data:image/png;base64,..." download="abrakadabra_iLoveCats.jpg">下载id</a>

- Антон

Answer 2

您当前拥有以下内容：

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

您可以使用链接到data URL的<a>标签将其包围起来：

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

- Chai T. Rex

---

感谢您的回答。我正在尝试在我的React项目中使用它，并编写了以下代码 - <a target='_blank' href={'data:image/jpg;base64,' + this.state.schemeImageBase64}><img width='500px' src={'data:image/jpg;base64,' + this.state.schemeImageBase64}/></a>。图像显示正确，光标图标显示为链接，但是当我单击图像时，什么也不会发生，只有控制台显示错误“不允许导航顶部框架到数据URL”。通过使用JavaScript打开包含base64图像的新选项卡解决了这个问题- https://dev59.com/T1YN5IYBdhLWcg3w7MG5#46672702 - Dmitriy Vinokurov