在网页中嵌入条形码

什么是在单个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

在网页中嵌入条形码

回答

相关问题