実行サンプル
半角数字 半角英大文字 - $ / + % 半角ｽﾍﾟｰｽ
スタート、ストップビットは不要
生成画像は[右クリック]⇒[名前を付けて画像を保存]が可能です
実行ソースコード
<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', {willReadFrequently:true});
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(/[Ａ-Ｚａ-ｚ０-９]/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>