HTML5【Javascript】[Canvas] JANコードから画像を生成してダウンロード保存できます。

商品によく付いてる JANコードを、絵とか画像を描画できる HTML5 の Canvas を利用して、バーコードの画像を作りだします。
今後やりたいこと
  • 複数入力できるようにする(?)
  • 高さもいい感じにすれば、もしかしたら規格に近くなるかも試練

できた・・・かも?

↓ここにJANの数字を入力してね!

線の太さ:px

入力後画像生成ボタンを押してね!

 | 
canvas画像がここに表示されます。
↓画像化したのがコチラに表示されます。
デバック用 x のぽじょしょん→
■更新履歴
  • 2015年4月30日:
    • input の type="text" じゃないと maxlength の値反映されないのね・・・
      んでついでに pattern (入力書式)[0-9]{7,13}を設定しました。
    • canvas 版を大幅に整理しました。
      • データキャラクタを配列化
      • チェックデジットの計算をコンパクトに
      • バーの描画を超スッキリさせました
      • 線の太さからキャンバスの幅を動的にしました
      • 高さを 50 を基準に線の太さで変わるようにしました
  • 2015年4月16日:
    • input の属性で min=7 max=13 ってやってたけど、これ違いますねw7~13の数値っていう意味で桁じゃないですね
      maxlength が正しいね
  • 2014年3月6日:
    • デバック用のポジション の表示がおかしかった。
    • バーに影響があるかといったらなかったのでよかった。
  • 2014年3月4日:
    • 49はいいけど45がおかしい気がする
    • そうでした。奇数の5を修正しました。
    • エンドコードがおかしいような気がする
    • そうでした。エンドコードを修正しました。
  • 2014年2月27日:
    • クリアボタン反映
    • 13桁に対応
    • というか気付いた FireFox だと canvas 上で右クリックしても画像になるんだね
  • 2014年2月26日:
    • 1pxで作ってたが細いっぽい。
      2pxで作り直そうかと思ったが、変えれるようにならないかやってみた
    • どうもおかしい。
      幅の掛け算を2回やってた。いい感じっぽい
    • 8桁のみ完成
    • これやべーよ。画像生成ボタンで画像ができます。上のやつは canvas 画像(色や線などで描いたやつ)
      下が『名前を付けて保存』ができる画像です。保存してちょお
    • クリアボタン未実装
    • 線の太さ2がいいっぽい
  • 2014年2月25日:
    • JANの数字を仮に決めて各数字からバーの白黒をゲットすることに成功
  • 2014年2月24日:
    • 作成に着手。眠いので寝ることにする。