0

単一の html ページで多数 (たとえば 500) のバーコード画像 (コード 128 、白黒) を提供する最良の方法は何ですか。私の限られた経験に基づいて、さまざまなオプションが表示されます

  1. バーコードが埋め込まれた (base64 エンコーディング) 静的な html ページを生成します。
  2. バーコードを画像として提供 (500 の個別のリクエスト!)
  3. クライアント側の JS バーコード ジェネレーターを使用します (利用可能なライブラリの品質とサイズについてはわかりません。ほとんど見たことがなく、使用したくない)

フロントエンドに AngularJS を使用し、バーコードはバックエンドで生成されます。私は主に最新のブラウザをターゲットにしています(主に最新のクロム)

もっと良い方法はありますか?

ありがとう。

4

4 に答える 4

2

高さ 1px の png スプライトとしてバーコードを生成します。それぞれ幅 100px の 500 個のバーコードを含む 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 スプライト デモからの 250 個のバーコード: http://jsfiddle.net/agFvK/4/

于 2012-10-16T22:52:34.773 に答える
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 に答える
1

#2に関しては、これは画像の最適化の読み込みです。500 の個別のリクエストが望ましくないということは正しいです。このアプローチに関しては、いくつかのオプションがあります。

1) すべての画像を含む 1 つの巨大な画像。CSS ポジショニングを使用して、それぞれを表示します。この技術はスプライトと呼ばれます

2) 一度にすべての画像を実際に表示する必要がありますか? オンデマンドでのみ必要な場合は、ユーザーがそれらを表示するアクションを実行したときにのみ動的に追加します。

3) それらすべてを表示する必要がある場合は、ページのスクロールを伴う動的読み込みアプローチを検討してください。ページの読み込み時に最初の 10 件を読み込み、ユーザーが画面の下部に向かってスクロールすると、次の 10 件を読み込むことができます。

それらを生成するための JavaScript ライブラリに関しては、もう一度考えてみてください。可能であれば、それが最善の方法です。多くのユーザーにとって、あなたは何千ものユニークなバーコードのように思えます。これが実際にあなたの状況である場合、これをクライアントにプッシュすると、サーバーの負荷が大幅に軽減されます。

于 2012-10-16T21:20:42.877 に答える
0

アルゴリズムを見つけて、独自のクライアント側ジェネレーターを作成します。このために、いくつかのオプションを検討します。垂直線に左フローティング div を使用する (border-left、width、border-right、margin-right を利用できます)、canvas を使用する、または css3 線形グラデーションを使用します。

UPD: base64 でエンコードされた画像を使用して投票を #1 に変更しました。クライアントがそれらを表示する方が高速になると思います (バーコードの生成には CPU が必要になるため)。画像をデータベースに保存できます。svg 形式の場合はさらに良くなる可能性があるため、印刷でより良くなり、Retina スクリーンで鮮明に表示されます (ところで、インライン svg も良いです)。

画像をスプライトに結合する前述のソリューションは好きではありません。そのようなファイルを維持および更新するのは簡単ではないと思います。

于 2012-10-17T00:50:41.003 に答える