JavascriptでCode39バーコードのPNG画像を作成する

実行サンプル

半角数字 半角英大文字 - $ / + % 半角スペース
スタート、ストップビットは不要



生成画像は[右クリック]⇒[名前を付けて画像を保存]が可能です

実行ソースコード

<input type="text" style="width:100%;max-width:500px;" maxlength="30" id="code39inp" value="SAMPLE01" /><br>
<input type="button" value="Code39バーコード画像生成" id="code39btn"><br>
<img id="code39img" style="width:100%;max-width:500px;"><br>
<div id="code39res"></div>

<script>
  TCode39=function(){
    this.nw=4;
    this.code=[
      {c:'0',bar:[1,0,1,0,0,1,1,0,1,1,0,1]},
      {c:'1',bar:[1,1,0,1,0,0,1,0,1,0,1,1]},
      {c:'2',bar:[1,0,1,1,0,0,1,0,1,0,1,1]},
      {c:'3',bar:[1,1,0,1,1,0,0,1,0,1,0,1]},
      {c:'4',bar:[1,0,1,0,0,1,1,0,1,0,1,1]},
      {c:'5',bar:[1,1,0,1,0,0,1,1,0,1,0,1]},
      {c:'6',bar:[1,0,1,1,0,0,1,1,0,1,0,1]},
      {c:'7',bar:[1,0,1,0,0,1,0,1,1,0,1,1]},
      {c:'8',bar:[1,1,0,1,0,0,1,0,1,1,0,1]},
      {c:'9',bar:[1,0,1,1,0,0,1,0,1,1,0,1]},
      {c:'A',bar:[1,1,0,1,0,1,0,0,1,0,1,1]},
      {c:'B',bar:[1,0,1,1,0,1,0,0,1,0,1,1]},
      {c:'C',bar:[1,1,0,1,1,0,1,0,0,1,0,1]},
      {c:'D',bar:[1,0,1,0,1,1,0,0,1,0,1,1]},
      {c:'E',bar:[1,1,0,1,0,1,1,0,0,1,0,1]},
      {c:'F',bar:[1,0,1,1,0,1,1,0,0,1,0,1]},
      {c:'G',bar:[1,0,1,0,1,0,0,1,1,0,1,1]},
      {c:'H',bar:[1,1,0,1,0,1,0,0,1,1,0,1]},
      {c:'I',bar:[1,0,1,1,0,1,0,0,1,1,0,1]},
      {c:'J',bar:[1,0,1,0,1,1,0,0,1,1,0,1]},
      {c:'K',bar:[1,1,0,1,0,1,0,1,0,0,1,1]},
      {c:'L',bar:[1,0,1,1,0,1,0,1,0,0,1,1]},
      {c:'M',bar:[1,1,0,1,1,0,1,0,1,0,0,1]},
      {c:'N',bar:[1,0,1,0,1,1,0,1,0,0,1,1]},
      {c:'O',bar:[1,1,0,1,0,1,1,0,1,0,0,1]},
      {c:'P',bar:[1,0,1,1,0,1,1,0,1,0,0,1]},
      {c:'Q',bar:[1,0,1,0,1,0,1,1,0,0,1,1]},
      {c:'R',bar:[1,1,0,1,0,1,0,1,1,0,0,1]},
      {c:'S',bar:[1,0,1,1,0,1,0,1,1,0,0,1]},
      {c:'T',bar:[1,0,1,0,1,1,0,1,1,0,0,1]},
      {c:'U',bar:[1,1,0,0,1,0,1,0,1,0,1,1]},
      {c:'V',bar:[1,0,0,1,1,0,1,0,1,0,1,1]},
      {c:'W',bar:[1,1,0,0,1,1,0,1,0,1,0,1]},
      {c:'X',bar:[1,0,0,1,0,1,1,0,1,0,1,1]},
      {c:'Y',bar:[1,1,0,0,1,0,1,1,0,1,0,1]},
      {c:'Z',bar:[1,0,0,1,1,0,1,1,0,1,0,1]},
      {c:'-',bar:[1,0,0,1,0,1,0,1,1,0,1,1]},
      {c:'.',bar:[1,1,0,0,1,0,1,0,1,1,0,1]},
      {c:' ',bar:[1,0,0,1,1,0,1,0,1,1,0,1]},
      {c:'$',bar:[1,0,0,1,0,0,1,0,0,1,0,1]},
      {c:'/',bar:[1,0,0,1,0,0,1,0,1,0,0,1]},
      {c:'+',bar:[1,0,0,1,0,1,0,0,1,0,0,1]},
      {c:'%',bar:[1,0,1,0,0,1,0,0,1,0,0,1]},
      {c:'*',bar:[1,0,0,1,0,1,1,0,1,1,0,1]},
    ];
    this.res='';
    let can=document.createElement('canvas');
    let ctx=can.getContext('2d');
    this.getimg=function(st){
      st='*'+this.bcd(st)+'*';
      this.res=st;
      can.width=st.length*this.nw*13+this.nw*3;
      can.height=this.nw*12;
      can.style.width=(st.length*this.nw*13+this.nw*3)+'px';
      can.style.height=this.nw*6+'px';
      ctx.fillStyle="rgba(255,255,255,1.0)";
      ctx.fillRect(0,0,can.width,can.height);
      for(let i=0;i<st.length;i++){
        let s=st.substr(i,1);
        let j=0;
        for(let k=0;k<this.code.length;k++){
          if(this.code[k].c==s){
            j=k;
            break;
          }
        }
        for(k=0;k<12;k++){
          if(this.code[j].bar[k]==1){
            ctx.beginPath();
            ctx.fillStyle = "rgba(0,0,0,1.0)" ;
            ctx.rect(this.nw*2+(i*13+k)*this.nw,this.nw*2,this.nw,this.nw*8);
            ctx.fill();
          }
        }
      }
      return can.toDataURL('image/png');
    }
    this.zen2han=function(str){
      return str.replace(/[A-Za-z0-9]/g, function(s){
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
      });
    }
    this.bcd=function(v){
      v=this.zen2han(v);
      v=v.replace(/[^0-9a-zA-Z\-\.\$\/\+\%\ ]+/gi,'');
      v=v.toUpperCase();
      //console.log(v);
      return v;
    }
  }
  code39=new TCode39;
  window.addEventListener('load',function(){
    document.getElementById('code39btn').addEventListener('click',function(){
      document.getElementById('code39img').src=code39.getimg(document.getElementById('code39inp').value);
      document.getElementById('code39res').innerHTML=code39.res;
    });
  });
</script>