39code 바코드 그리기

회사에서 바코드 폰트를 이용해서 바코드를 출력했었는데.....

영 삐리해서리..... 세로로만 키우고 싶은데..... 폰트라서 폭까지 넓어져버리고 ㅡㅡ;;

그리고 치명적인 버그가 있었음. ㅡㅡ;

어떤 특수한 문자가 입력되면 바코드 폰트가 깨지더라구영~

그래서 다른걸로 바꿀려고 했는데

asp 라서 따로 php 의 함수를 쓸수 없어서 ㅡㅡ;;;;;;

이미지 하나씩 따서 할라고 해도 그것도 노가다고 ㅋㅋㅋㅋㅋㅋ;;

그래서 걍 javascript 로 하나 만들었삼.........

ie, ff 다 지원되는데.....

ff 에선 바코드 아래 문자열이 양측정렬이 안됨...... ie 의 스타일시트를 써서 ㅋㅋㅋㅋㅋㅋ;

회사에선 ie 뿐이 안 써서리 ff 는 패스연~~~~~~~~~~~

혹시 사용하시는 분이 수정하시게 되면 제 메일로 연락 좀 주세연;;;;;;;;;

테스트 해보실분 아래로.......

http://dev.i-swear.com/barcode/info.php

사용방법 :
바코드를 그릴 페이지에 아래의 스타일 시트를 선언해주셔야 합니다.
  <style type="text/css">
  .space { background:#FFFFFF;float:left;margin:0;padding:0;cursor:default; }
  .bar { background:#000000;float:left;margin:0;padding:0;cursor:default; }
  .bartext { clear:both;font-family:Fixedsys,Arial;font-size:12px;cursor:default; }
  </style>
barcode.js 파일을 불러들입니다.
<script type="text/javascript" src="barcode.js"></script>

바코드를 그릴 라인에서 아래와 같이 써줍니다.
<script type="text/javascript">barcode("1234567890", 40);</script>
<script type="text/javascript">barcode("i-swear.com", 40);</script>

위와 같이 해주면 아래와 같이 그려집니다.



사용예시
기본 : 바의 넓이 1px, 굵은바의 넓이 2px, 색상 검정
barcode(문자열, 바코드의 세로길이); // 필수 예시1
barcode(문자열, 바코드의 세로길이, 바의 넓이, 굵은바의 넓이); // 예시 2
barcode(문자열, 바코드의 세로길이, 바의 넓이, 굵은바의 넓이, 스페이스의 넓이, 굵은 스페이스의 넓이) // 예시 3
barcode(문자열, 바코드의 세로길이, 바의 넓이, 굵은바의 넓이, 스페이스의 넓이, 굵은 스페이스의 넓이, 바코드의 색상, 바코드 문자열의 색상) // 예시 4

ps. 문자열은 소문자로 넣어도 대문자로 변환됩니다..
     레이어는 absolute 이기 때문에 바코드를 연달아 출력하려면 br 태그로 띄워주세연~~~
     사용중 더 좋은 방법이나 버그가 있을 경우 메일로 부탁드립니다.
    소스를 오픈한다는것은 더 좋은 소스로 고치기 위함이 아닐까요......
    감사합니다.

barcode.js

barcode.js

// barcode 함수 사용법
// barcode(문자열, 바코드세로길이, 얇은바넓이px, 굵은바넓이px, 얇은스페이스px, 굵은스페이스px, 바코드의색깔, 바코드아래문자열색깔);
//         필수,   필수,           이하 선택옵션, 지정하지 않을시 기본 1px ,굵은바 2px, 바코드의색깔 검정, 문자열색깔 검정

  var s;
  var b;
  var b_;
  var s_;
  var bar_ar = new Array();
  bar_ar["0"] = "1010011011010";
  bar_ar["1"] = "1101001010110";
  bar_ar["2"] = "1011001010110";
  bar_ar["3"] = "1101100101010";
  bar_ar["4"] = "1010011010110";
  bar_ar["5"] = "1101001101010";
  bar_ar["6"] = "1011001101010";
  bar_ar["7"] = "1010010110110";
  bar_ar["8"] = "1101001011010";
  bar_ar["9"] = "1011001011010";
  bar_ar["A"] = "1101010010110";
  bar_ar["B"] = "1011010010110";
  bar_ar["C"] = "1101101001010";
  bar_ar["D"] = "1010110010110";
  bar_ar["E"] = "1101011001010";
  bar_ar["F"] = "1011011001010";
  bar_ar["G"] = "1010100110110";
  bar_ar["H"] = "1101010011010";
  bar_ar["I"] = "1011010011010";
  bar_ar["J"] = "1010110011010";
  bar_ar["K"] = "1101010100110";
  bar_ar["L"] = "1011010100110";
  bar_ar["M"] = "1101101010010";
  bar_ar["N"] = "1010110100110";
  bar_ar["O"] = "1101011010010";
  bar_ar["P"] = "1011011010010";
  bar_ar["Q"] = "1010101100110";
  bar_ar["R"] = "1101010110010";
  bar_ar["S"] = "1011010110010";
  bar_ar["T"] = "1010110110010";
  bar_ar["U"] = "1100101010110";
  bar_ar["V"] = "1001101010110";
  bar_ar["W"] = "1100110101010";
  bar_ar["X"] = "1001011010110";
  bar_ar["Y"] = "1100101101010";
  bar_ar["Z"] = "1001101101010";
  bar_ar["*"] = "1001011011010";
  bar_ar["-"] = "1001010110110";
  bar_ar["."] = "1100101011010";
  bar_ar[" "] = "1001101011010";
  bar_ar["$"] = "1001001001010";
  bar_ar["/"] = "1001001010010";
  bar_ar["+"] = "1001010010010";
  bar_ar["%"] = "1010010010010";


  function barcode(str,height, barwidth, doublebarwidth, spacewidth, doublespacewidth, bgcolor,fontcolor) {
    if (barwidth && !spacewidth) spacewidth = barwidth;
    if (doublebarwidth && !doublespacewidth) doublespacewidth = doublebarwidth;
    if (!barwidth) barwidth = 1;
    if (!doublebarwidth) doublebarwidth = 2;
    if (!spacewidth) spacewidth = 1;
    if (!doublespacewidth) doublespacewidth = 2;
    if (!height) height = 100;
    if (!bgcolor) bgcolor = "#000000";
    else bgcolor = "#"+bgcolor;
    // s = space , b = bar
    var data = "";
    var text_width = 0;
    if (barwidth == 0) return;
    if (!str) return;
    str = "*"+str+"*";
    var strlen = str.length;
    var txtchar = null;
   

    s = "<div class='space' style='width:"+spacewidth+"px;height:"+height+"px'></div>";
    s_ = "<div class='space' style='width:"+doublespacewidth+"px;height:"+height+"px'></div>";
    b = "<div class='bar' style='width:"+barwidth+"px;height:"+height+"px;background:"+bgcolor+"'></div>";
    b_ = "<div class='bar' style='width:"+doublebarwidth+"px;height:"+height+"px;background:"+bgcolor+"'></div>";
    data = "<div style='position:absolute;'>";
    for (var i=0; i<strlen; i++) {
    txtchar = str.substring(i,i+1).toUpperCase();
    data += bar_fun(txtchar);
    // space 몇개인지 찾는다.
    tmp = bar_ar[txtchar].match(/0/g);
    text_width += tmp.length * spacewidth;
    // Bar 몇개인지 찾는다.
    tmp = bar_ar[txtchar].match(/1/g);
    text_width += tmp.length * barwidth;
    // doublebar 몇개인지 찾는다.
    tmp = bar_ar[txtchar].match(/2/g);
    text_width += tmp.length * doublebarwidth;
    // doublespace 몇개인지 찾는다.
    tmp = bar_ar[txtchar].match(/3/g);
    text_width += tmp.length * doublespacewidth;
    }

    text_width -= 5;
    data += "<div class='bartext' style='width:"+text_width+"px;text-align:justify;text-justify:distribute-all-lines;font-size:11px;color:#"+fontcolor+"'>"+str.toUpperCase()+"</div>";
    data += "</div>";
    document.writeln(data);
  }

  function bar_fun(str) {
    var data = "";
    var prev_tmp = "";
    bar_ar[str] = bar_ar[str].replace(/[0]{2}/g, "3");    // 3 넓은 화이트 스페이스
    bar_ar[str] = bar_ar[str].replace(/[1]{2}/g, "2");    // 2 넓은 바

    for (var i=0; i<bar_ar[str].length; i++) {
    tmp = bar_ar[str].substring(i,i+1);
        if (tmp == "0") data += s;
        else if (tmp == "1") data += b;
        else if (tmp == "2") data += b_;
        else data += s_;
    }
    // for
    return data;
  }

.