如何在網頁上顯示動態生成的圖像（條形碼）？

我有一個條形碼，我動態生成，並希望傳遞給後來成爲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

如何在網頁上顯示動態生成的圖像（條形碼）？

回答

相關問題