在網頁中嵌入條形碼

什麼是在單個html頁面上提供大量（比如500個）條形碼圖像（代碼128，黑色&白色）的最佳方式。根據我有限的經驗，我看到了不同的選項在網頁中嵌入條形碼

生成一個靜態html頁面，其中嵌入了條形碼（base64編碼）。
即成條形碼作爲圖像（500個單獨的請求！）
使用客戶端JS條碼生成（不知道可用庫的質量和大小。我看了一些，並且不希望使用它們）

我使用AngularJS作爲前端，條形碼在後端生成。我主要針對現代瀏覽器（主要是最新的Chrome）

有沒有更好的方法？

謝謝。

來源

2012-10-16 bsr

不像128條碼那麼多，如果你有適合他們的字體。 –

也許最好的方法是分頁？誰將閱讀500頁條形碼的頁面？ – Christophe

每頁500個條碼，小時，年份，分鐘？ –

生成條形碼爲1px高的PNG精靈。 500個條形碼寬度爲100px的png文件大小應小於20KB。從精靈爲png演示

.barcode 
{ 
    background-image: url(barcodes.png); 
    background-repeat: repeat-y; 
    height: 35px; 
    width: 100px; 
    display: inline-block; 
    margin: 0 17px 14px 0; 
}

250條碼：顯示它在使用background-repeat: repeat-y和background-position-x值設置爲(barcodeIndex * -100) + "px"http://jsfiddle.net/agFvK/4/

來源

2012-10-16 22:52:34 gilly3

關於＃2，這只是圖像優化加載。你是正確的，500個單獨的請求是不可取的。關於這種方法，你有幾個選擇。

1）包含所有圖像的巨大圖像。使用css定位來顯示它們中的每一個。這種技術被稱爲spriting

2）你真的需要一次顯示所有的圖像嗎？如果您只需要它們，只需在用戶執行應顯示它們的操作時動態添加它們。

3）如果您確實需要顯示所有這些，請考慮涉及滾動頁面的動態加載方法。您可能會在加載頁面時加載前10個，然後隨着用戶滾動到屏幕底部，您將加載下10個。

關於javascript庫的生成，請再說一次。如果可能的話，這將是最好的方式。這聽起來像你可能爲成千上萬的用戶提供了獨特的條形碼。如果這確實是您的情況，那麼將其推送到客戶端意味着服務器上的負載會減少很多。

來源

2012-10-16 21:20:42 Geuis

我會找到的算法，寫我自己的客戶端生成。爲此，我會考慮幾個選項：使用左浮動div來繪製垂直線（您可以使用左邊界，左邊界，右邊界，右邊界），使用畫布或使用css3線性漸變。

UPD：我通過使用base64編碼圖像將投票改爲＃1，我認爲客戶端顯示它們會更快（因爲生成條形碼需要一些cpu），並且可以將圖像存儲在數據庫中。如果它們採用svg格式，可能會更好，因此它們在打印時會更好，並且在視網膜屏幕上看起來更清晰（順便說一句，svg也很好）。

我不喜歡提到的解決方案將圖像合併爲精靈，我不認爲這將很容易維護和更新這樣的文件。

來源

2012-10-17 00:50:41

我在服務器端生成的大型條形碼中使用圖像時遇到了很多問題。我發現解決這個問題的唯一方法是使用HTML和CSS在客戶端生成條形碼。

您可以使用PHP來生成DIV而不是生成圖像。

這撥弄說明如何做到這一點使用JS： http://jsfiddle.net/u7uPJ/2/

該解決方案不使用JS庫，只有條形碼類。使用庫，您可以使用以下內容生成大量條形碼：

$('div.barcodeC').each(function(){ 
    this.appendChild(Barcode(this.className.match(/barcode\-([A-Za-z0-9\-]+)/)[1], "code128",{barWidth:2, barHeight:50})); 
});

來源

2014-01-21 15:01:53

在網頁中嵌入條形碼

回答

相關問題