在网页中嵌入条形码

Question

在一个html页面中提供大量条形码图像(代码128，黑白)的最佳方法是什么？根据我有限的经验，我看到了不同的选择

1. 生成嵌入条形码(base64编码)的静态html页面。
2. 提供条码作为图像(500个单独的请求！)
3. 使用客户端JS条形码生成器(不确定可用库的质量和大小。我很少看到，我宁愿不使用它们)

我使用AngularJS作为前端，并在后端生成条形码。我主要针对的是现代浏览器(主要是chrome最新版)。

有更好的方法吗？

谢谢。

Answer 1

将条形码生成为1 1px高的png精灵。png的文件大小应小于20 at，每个png的条形码为100 at。在使用background-repeat: repeat-y中显示它，并将background-position-x值设置为(barcodeIndex * -100) + "px"

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

来自png精灵的250个条形码演示：http://jsfiddle.net/agFvK/4/

Answer 2

关于#2，这只是图像优化加载。你是正确的，500个单独的请求是不可取的。关于这种方法，您有几个选择。

1)一个巨大的图像包含了你所有的图像。使用css定位来显示其中的每一个。这种技术叫做喷溅。

2)你真的需要同时显示所有的图像吗？如果您只需要它们，只在用户执行应该显示它们的操作时才动态添加它们。

3)如果您确实需要显示所有这些内容，请考虑一种动态加载方法，包括滚动页面。您可能会加载页面上的前10个，然后当用户向屏幕底部滚动时，将加载下一个10个。

对于生成它们的javascript库，再考虑一下。如果可能的话，这将是最好的办法。听起来你可能是成千上万个独特的条形码为许多用户。如果这确实是您的情况，将其推给客户端将意味着您的服务器上的负载要少得多。

Answer 3

我在服务器端生成的大型条形码中使用图像时遇到了许多问题。解决这个问题的唯一方法是使用HTML和CSS在客户端生成条形码。

您可以使用PHP生成DIVs，而不是生成图像。

这个小提琴演示了如何使用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}));
});