如何在网页上显示动态生成的图像（条形码）？答案

【问题标题】：How to display a dynamically-generated image (barcode) on a web page?如何在网页上显示动态生成的图像（条形码）？
【发布时间】：2011-01-20 21:02:00
【问题描述】：

我有一个动态生成的条形码，并希望传递给稍后将成为 pdf 的 gsp。我不需要为自己的任何目的保留条形码，并且只想将图像从控制器传递给 gsp。

有没有办法渲染作为变量传递而不是指定 src 的图像？

提前致谢。

编辑：

由于我是从 gsp 生成 pdf，因此我正在刷新响应的输出流，因此也无法对图像执行此操作，否则会出错。

此外，使用 javascript/jQuery 不起作用，因为页面从不直接由浏览器呈现。

看起来我唯一的选择是将图像暂时保存在某个地方，然后删除它们......

【问题讨论】：

唉，没关系，刚注意到IE 7不支持？
我不熟悉 grails，但是在 PHP 中执行此操作的方法只是将 src 属性设置为脚本。所以，<img src="something.php" /> 并让 PHP 脚本输出原始图像数据。你能做这样的事吗？不要忘记适当设置您的内容类型标题。
这更多的是我的想法，但我们不使用 PHP。渲染一个单独的动作来生成和显示图像是否有意义？或者这有点矫枉过正？

标签： java html grails

【解决方案1】：

我最近回复了similar question，也许它的答案对你有用。我会在这里粘贴一部分。这基本上是 Oded 的“在此之外……”的建议。

class BarcodeController {
    def index = {
        def img // byte array, set this to the binary contents of your image

        response.setHeader('Content-length', img.length)
        response.contentType = 'image/png' // or the appropriate image content type
        response.outputStream << img
        response.outputStream.flush()
    }
}

然后您可以在标签的 src 中访问您的图像，如下所示：

<img src="${g.link(controller: 'barcode', action: 'index')}"/>

此答案似乎符合您对该问题的最后评论（关于使用 PHP 的类似解决方案）。

【讨论】：

【解决方案2】：

您可以为 src 属性使用data URI scheme。

数据 URI 方案是一种 URI 方案，它提供了一种在网页中包含内嵌数据的方法，就好像它们是外部资源一样。

这是维基百科文章中的一个示例：

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

除此之外，如果您使用服务器端技术，您可以从脚本（使用正确的 mime 类型）流式传输图像数据并将 src 属性指向它。

Here 是一个与 grails 相关的 SO 问题。

【讨论】：

它说它不兼容 IE。有没有这样的解决方案？
@UBM - 你的意思是兼容。不兼容的是IE。对于这个特定的解决方案（数据 URI 方案），我不知道有什么解决方法。
看起来第二个链接是指使用数据库中的图像。我使用的图像是在控制器中动态创建的，不会/不会在任何地方持久化。
@UBM - 所以？您不是从数据库中获取它，而是动态创建它？我不知道 grails，但那不是很相似吗？
抱歉，我可能遗漏了一些东西，但我认为这对我没有用。

【解决方案3】：

只是想为这个古老的问题做出贡献。我通过在BuildConfig.groovy 中添加以下几行来完成这项工作：

在plugins 部分：

 plugins {
     // other plugins here
     // ...
     compile ":barcode4j:0.3"
     compile ":rendering:1.0.0"
 }

在dependencies 部分：

 dependencies {
     // other dependencies here
     // ...
     compile 'avalon-framework:avalon-framework:4.1.5'
 }

然后我根据在网上找到的代码示例添加了一个控制器。我特别需要一个 DataMatrix 生成器，但添加其他生成器应该很容易，只需向控制器添加方法即可。抱歉代码质量不好（我是 Groovy 新手）：

package myproject

import org.krysalis.barcode4j.impl.datamatrix.DataMatrix
import java.awt.Dimension

class BarcodeController {

    //  a valid PNG image, base64 encoded  
    static invalidBarcodeImgBase64 = """iVBORw0KGgoAA...=="""

    // Needs index.gsp for testing
    def index() {
        ['uuid': UUID.randomUUID(), 'fecha': new Date()]
    }

    def dataMatrix(String value) {

        if ((null == value) || (value.length() < 1) || (value.length() > 2000)) {
            def img = invalidBarcodeImgBase64.decodeBase64()
            response.setHeader('Content-length', new Integer(img.length).toString())
            response.contentType = 'image/png'
            response.outputStream << img
            response.outputStream.flush()

        } else {
            def generator = new DataMatrix()
            generator.dataMatrixBean.setMinSize(new Dimension(16, 16))
            renderBarcodePng(generator, value, [antiAlias: false])
        }
    }

    def datamatrix(String value) {
        dataMatrix(value)
    }
}

最后是index.gsp 在条形码视图中进行测试：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <title>DataMatrix</title>
  </head>

  <body>
    <g:img dir="barcode" file="dataMatrix?value=${uuid}"/>
    <br />
    <br />
    <g:img dir="barcode" file="dataMatrix?value=${fecha}"/>
    <br />
    <br />
    <g:img dir="barcode" file="dataMatrix?value=Nothing to see here"/>
  </body>
</html>

【讨论】：