JQuery를 이용한 QR코드 생성

 

• [배경]
  기존 웹반응형 페이지에서는 google chart API를 사용하여
  QR코드를 이미지 형태로 img태그 링크서비스로 사용.
  
  2019-03-20 부터 google chart API 중
  QR코드 서비스의 request 처리가 원활하지 않음. (err : 502)
  (2019-03-16 부터 유지보수가 중단 될 수 있다는 안내 확인)
  
  [처리, 대안]
  0. 설명 :
  - canvas, image, div 형태로 QR코드 출력.
  - image형태의 QR코드 생성 가능.
  (부대분의 다양한 JQuery의 QR코드 생성은 테이블형태의 QR코드,
  테이블형태는 웹반응형 UI에서 적용하는데 불편함이 있음)
  - 외부 API서비스의 단점인 유연성 성립.
  
  1. 첨부파일 js를 import 참조
  
  2. script 샘플 :
  var options = {
    render: "image",   // render method: 'canvas', 'image' or 'div'
    ecLevel: "H",       // error correction level: 'L', 'M', 'Q' or 'H'
    minVersion: 1,      // version range somewhere in 1 .. 40
    fill: "#333333",      // code color or image element
    background: "#ffffff",  // background color or image element, null for transparent background  //mSize: 0.1,
    //mPosX: 0.5,
    //mPosY: 0.5,
    //label: jq('#label').val(),
    //fontname: jq('#font').val(),
    //fontcolor: jq('#fontcolor').val(),
    //image: jq('#img-buffer')[0]
  };
• //setup 작업
  jQuery("#conDiv_"+i).empty().qrcode(options); //반복문 사용 시
  //또는
  jQuery("#conDiv").empty().qrcode(options); //단일 사용 시
  
  3. 주의사항 :
  setup 작업 시 반복문 일 경우 div 요소의 id값이 중복 되지 않게 처리
•   text: "QR코드:코드값"// content values
    size: "80",       // size in pixel
    radius: "10",    // corner radius relative to module width: 0.0 .. 0.5
    quiet: "3",      // quiet zone in modules
    mode: "0",     // 0: normal 1:label strip 2:label box 3:image strip 4:image box