Question

在单个html页面中提供大量（例如500个）条形码图像（代码128，黑色和白色）的最佳方式是什么。基于我有限的经验，我看到了不同的选择

生成一个静态html页面，其中嵌入了条形码（base64编码）。
将条形码作为图像提供（500个单独请求！）
使用客户端JS条形码生成器（不确定可用库的质量和大小。我看到很少，并且不想使用它们）

我使用AngularJS作为前端，条形码在后端生成。我主要针对现代浏览器（主要是chrome）

有更好的方法吗？

感谢。

Answer 1

将条形码生成为1px高的png精灵。具有500条代码宽度为100px的png的文件大小应小于20KB。使用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定位显示每个。这种技术称为spriting

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

3）如果确实需要显示所有这些内容，请考虑一种涉及滚动页面的动态加载方法。您可以在页面加载时加载前10个，然后当用户滚动到屏幕底部时，您将加载下一个10。

关于生成它们的javascript库，请再考虑一下。如果可能的话，这将是最好的方法。对于很多用户来说，你可能会成千上万的独特条形码。如果这确实是你的情况，那么将它推送给客户端意味着服务器上的负载会减少很多。

Answer 3

在服务器端生成的大条形码中使用图像时遇到了很多问题。我发现解决这个问题的唯一方法是使用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}));
});

Answer 4

我会找到算法并编写自己的客户端生成器。为此我会考虑几个选项：使用左浮动div作为垂直线（可以使用border-left，width，border-right，margin-right），使用canvas或使用css3线性渐变。

UPD：我通过使用base64编码的图像将我的投票改为＃1，我认为客户端显示它们会更快（因为生成条形码需要一些cpu），你可以将图像存储在数据库中。如果它们采用svg格式可能会更好，所以它们在印刷品上会更好，在视网膜屏幕上看起来更清晰（顺便说一句内联svg也很好）。

我不喜欢提到将图像组合成精灵的解决方案，我认为维护和更新这样的文件并不容易。

在网页中嵌入条形码

4 个答案: