0

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

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

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

有更好的办法吗？

谢谢。

4

4 回答 4

2

将条形码生成为 1px 高的 png 精灵。包含 500 个条形码、每个 100 像素宽的 png 的文件大小应小于 20KB。在 using 中显示它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 sprite 演示的 250 个条形码：http: //jsfiddle.net/agFvK/4/

于 2012-10-16T22:52:34.773 回答
1

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

1) 一张包含所有图像的巨型图像。使用 css 定位来显示它们中的每一个。这种技术称为精灵

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

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

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

于 2012-10-16T21:20:42.877 回答
1

我在使用服务器端生成的大条形码中的图像时遇到了很多问题。我发现解决这个问题的唯一方法是在客户端生成条形码，使用 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-21T15:01:53.530 回答
0

我会找到算法并编写自己的客户端生成器。为此，我会考虑几个选项：对垂直线使用左浮动 div（您可以使用左边界、宽度、右边界、右边界）、使用画布或使用 css3 线性渐变。

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

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

于 2012-10-17T00:50:41.003 回答