Javascript 在网页中嵌入条形码_Javascript_Web Applications_Web

Javascript 在网页中嵌入条形码

javascript web-applications web

Javascript 在网页中嵌入条形码,javascript,web-applications,web,Javascript,Web Applications,Web,在一个html页面中提供大量（比如500）条形码图像（代码128，黑白）的最佳方式是什么。根据我有限的经验，我看到了不同的选择生成一个嵌入条形码（base64编码）的静态html页面将条形码作为图像提供（500个单独的请求！）使用客户端JS条形码生成器（不确定可用库的质量和大小。我看到的很少，并且不喜欢使用它们）我在前端使用AngularJS，条形码在后端生成。我主要针对现代浏览器（主要是chrome最新版本）还有更好的办法吗谢谢。关于#2，这只是图像优化加载。你是对的，500个单独

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

生成一个嵌入条形码（base64编码）的静态html页面

将条形码作为图像提供（500个单独的请求！）

使用客户端JS条形码生成器（不确定可用库的质量和大小。我看到的很少，并且不喜欢使用它们）

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

还有更好的办法吗

谢谢。

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

1）一个包含所有图像的巨大图像。使用css定位来显示它们中的每一个。这种技术被称为spriting

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

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

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

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

1）一个包含所有图像的巨大图像。使用css定位来显示它们中的每一个。这种技术被称为spriting

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

将条形码生成为1像素高的png精灵。在100px宽的情况下，包含500个条形码的png的文件大小应小于20KB。使用

background repeat:repeat-y

将其显示，并将

background-position-x

值设置为

（条形码索引*-100）+“px”

：

。条形码
{
背景图片：url（barcodes.png）；
背景重复：重复-y；
高度：35px；
宽度：100px；
显示：内联块；
利润率：0 17px 14px 0；
}

png sprite演示中的250个条形码：

将条形码生成为1px高的png sprite。在100px宽的情况下，包含500个条形码的png的文件大小应小于20KB。使用

background repeat:repeat-y

将其显示，并将

background-position-x

值设置为

（条形码索引*-100）+“px”

：

。条形码
{
背景图片：url（barcodes.png）；
背景重复：重复-y；
高度：35px；
宽度：100px；
显示：内联块；
利润率：0 17px 14px 0；
}

png sprite演示中的250个条形码：

我会找到算法并编写自己的客户端生成器。为此，我将考虑几个选项：使用左浮动div作为垂直线（可以使用边框左、宽度、边框右、边距右）、使用画布或使用CSS3线性渐变。 UPD：通过使用base64编码的图像，我将投票改为#1，我认为客户端显示它们会更快（因为生成条形码需要一些cpu），并且您可以将图像存储在数据库中。如果它们是svg格式，可能会更好，所以它们在打印时会更好，在视网膜屏幕上看起来更清晰（顺便说一句，内嵌svg也不错）

我不喜欢上面提到的将图像合并到sprite中的解决方案，我认为维护和更新这样的文件并不容易。

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

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

此提琴演示了如何使用js执行此操作：

此解决方案不使用js库，只使用条形码类。使用库，您可以使用以下方法生成大量条形码：

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

我在使用服务器端生成的大型条形码中的图像时遇到了很多问题。我找到的唯一解决这个问题的方法