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

我有一个条形码，我动态生成，并希望传递给后来成为pdf的gsp。我不需要为了我自己的目的而坚持条形码，并且只想简单地将图像从控制器传递到gsp。如何在网页上显示动态生成的图像（条形码）？

有没有办法呈现作为变量传递的图像，而不是指定一个src？

在此先感谢。

编辑：

因为我产生于普惠制的PDF，我刷新响应的输出流，然后，因此不能与图像做也行，或者我得到一个错误。

此外，使用javascript/jQuery不起作用，因为该页面不会被浏览器直接渲染。

它可能看起来像我唯一的选择是坚持图像暂时某处，然后删除它们......

来源

2011-01-20 Igor

不能使用Base64编码也？ – 2011-01-20 21:06:08

Ach，没关系，只注意到IE不支持它？ – Igor

我对grails并不熟悉，但是在PHP中这样做的方法是将src属性设置为脚本。所以，''并让该PHP脚本输出原始图像数据。你能做那样的事吗？不要忘记适当地设置您的内容类型标题。 – Brad

最近我回答了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类似的解决方案）。

来源

2011-01-20 22:19:11

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

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

下面是来自wikipeida文章的例子：

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

这个之外，如果您使用的是服务器端的技术，你可以从一个脚本流中的图像数据（与正确的MIME类型）并将src属性指向它。

Here是一个相关的Grails问题。

来源

2011-01-20 21:11:26 Oded

它说它不符合IE标准。有没有解决方案？ – Igor

@UBM - 你的意思是_compatible_。这是不合规的IE浏览器。对于这个特定的解决方案（数据URI方案），我不知道解决方法。 – Oded

看起来第二个链接指的是使用数据库中的图像。我使用的图像是在控制器中动态创建的，并且不会/不会在任何地方持久保存。 – Igor

只是想贡献这个古老的问题。我得到这个工作通过添加下列行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>

来源

2015-03-30 22:17:08 dschulz

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

回答

相关问题