jQuery igqrcodebarcode 컨트롤을 사용하여 vcard qr 바코드 생성기 만들기

igQRCodeBarcode 컨트롤은 데이터 시각화를 위한 HTML5 캔버스 컨트롤입니다. QR(Quick Response) 코드를 렌더링하여 URL, 개인 연락처 등과 같은 다양한 종류의 정보를 제공합니다.

초기 단계

​igQRCodeBarcode를 구성하는 데 필요한 최소 요구 사항은 치수(너비 및 높이)를 설정하고 데이터 옵션의 값을 설정하는 것입니다. 데이터의 값은 QR 코드에 인코딩하기 위해 지팡이가 있는 정보를 포함하는 문자열이어야 합니다. vCard 데이터를 만드는 방법은 나중에 블로그에서 설명합니다. 컨트롤의 주요 기능은 세 가지 주요 범주로 그룹화할 수 있습니다: 1. 모양과 느낌 – 이 범주의 기능을 사용하여 막대를 변경하여 바코드를 사용자 정의할 수 있습니다. 색상과 배경. 두 번째 범주는 QR 코드별 – 이 범주의 기능을 사용하여 오류 수정 수준, 크기, 버전, 인코딩 모드 및 기타를 설정할 수 있습니다. 세 번째 범주는 컨트롤의 크기, 스트레치 및 채우기를 구성하는 기능을 통합합니다. 이러한 기능 중 일부를 살펴보겠습니다.

우리는 코드에 많은 정보를 추가하기를 원하기 때문에 barsFillMode 속성을 사용할 것이며 QR 리더가 쉽게 읽을 수 있도록 ensureEqualSize 값으로 설정하는 것이 중요합니다. 속성의 기본값은 fillSpace이며, 이는 코드 이미지가 igQRCodeBarcode에 사용할 수 있는 전체 공간을 채운다는 것을 의미합니다.

우리가 사용할 또 다른 속성은 errorCorrectionLevel 입니다. 오류 수정은 손상되거나 더러워진 인코딩된 데이터를 복원하는 기본 제공 기능입니다. 데이터 복구 수준은 기본적으로 손상된 기호의 15%에 있으며, 이는 errorCorrectionLevel이 medium으로 설정됨을 의미합니다. 복원할 수 있는 손상 기호의 7%에 해당하는 낮음으로 설정합니다. 보정 수준이 높을수록 QR 코드를 스캔하기 위해 사용자 장치에서 더 높은 저장 용량이 필요하므로 주의하십시오.

마지막으로 언급하고 싶은 속성은 sizeVersion 입니다. 이 기능은 QR 코드 바코드 매트릭스의 크기 버전을 지정합니다. 크기 버전은 매트릭스를 구성하는 검은색 및 흰색 모듈의 수를 나타냅니다. 이 컨트롤은 버전 1에서 버전 40까지의 크기 버전을 지원합니다. 첫 번째 버전은 21×21 크기의 모듈 매트릭스에 해당하고 버전 40은 177×177 모듈에 해당합니다. 버전을 설정하지 않으면 컨트롤은 데이터에 맞는 가장 작은 버전을 자동으로 사용합니다.

​문서 또는 API에서 igQRCodeBarcode 컨트롤에 대한 자세한 정보를 세밀하게 조정할 수 있습니다.

$("#barcode").igQRCodeBarcode({
    height: "200px",
    width: "200px",
    barsFillMode: "ensureEqualSize",
    errorCorrectionLevel: "low",
    data: "BEGIN:VCARD\r\nVERSION:2.1\r\nN:Somebody\r\nFN:Somebody\r\nORG:Organization's name\r\nTITLE:Job title\r\nTEL;TYPE=cell:555555555\r\nEMAIL;PREF;INTERNET:example@example.com\r\nEND:VCARD"
});

HTML:

<form id="businessCardInfo">
    <fieldset id="field">
        <legend>Personal Information</legend>
        <div class="popoverTooltip">
            <label>Prefix:</label>
            <br>
            <input id="textEditor" type="text" name="prefix" title="Mrs, Miss, Dr ..."><br>

            <label><span class="req">*</span> First Name:</label>
            <br>
            <input id="textEditor1" type="text" name="firstName" title="first name" required><br>

            <label>Middle Name:</label>
            <br>
            <input id="textEditor2" type="text" name="middleName" title="middle name"><br>

            <label><span class="req">*</span> Last Name:</label>
            <br>
            <input id="textEditor3" type="text" name="secondName" title="last name" required><br>

            <label><span class="req">*</span> E-mail:</label>
            <br>
            <input class="output" id="textEditor4" type="text" name="email" title="example@example.com"><br>

            <label>Phone (Home):</label>
            <br>
            <input class="output" id="textEditor5" type="text" name="usrtel" title="555-555-555"><br>

            <label>Mobile:</label>
            <br>
            <input class="output" id="textEditor6" type="text" name="mobile" title="555-555-555"><br>

            <label>Twitter:</label>
            <br>
            <input class="output" id="textEditor18" type="text" name="twi" title="twitter"><br>
        </div>
    </fieldset>

    <fieldset id="field2">
        <legend>Office Information</legend>
        <div class="popoverTooltip">
            <label><span class="req">*</span> Organization:</label>
            <br>
            <input class="output" id="textEditor7" type="text" name="companyName" title="Company name"><br>

            <label><span class="req">*</span> Job Title:</label>
            <br>
            <input class="output" id="textEditor8" type="text" name="position" title="Job title like: CEO, Software Engineer,..."><br>

            <label>Business E-mail:</label>
            <br>
            <input class="output" id="textEditor9" type="text" name="businessEmail" title="example@example.com"><br>

            <label>Business Phone:</label>
            <br>
            <input class="output" id="textEditor10" type="text" name="businessPhone" title="555-555-555"><br>

            <label>Fax:</label>
            <br>
            <input class="output" id="textEditor17" type="text" name="fax" title="555-555-555"><br>

            <label>Website:</label>
            <br>
            <input class="output" id="textEditor11" type="text" name="homepage" title="www.example.com"><br>
        </div>
    </fieldset>

    <fieldset id="field3">
        <legend>Office Address</legend>
        <div class="popoverTooltip">
            <label>Street:</label>
            <br>
            <input id="textEditor13" type="text" name="street" title="bul. Simeonovsko Shose 110B"><br>

            <label>City:</label>
            <br>
            <input id="textEditor14" type="text" name="city" title="Sofia, New York, London,..."><br>

            <label>State/Province:</label>
            <br>
            <input id="textEditor15" type="text" name="state"><br>

            <label>Country:</label>
            <br>
            <input id="textEditor12" type="text" name="country" title="UK, USA, Bulgaria, ..."><br>

            <label>Zip/Postal Code:</label>
            <br>
            <input id="textEditor16" type="text" name="zipcode"><br>
        </div>
    </fieldset>

    <br>
    <button id="generateBC" type="button">Generate Barcode</button>
</form>

JS:

$('#textEditor').igTextEditor({
    width: 220
});
 
$('#textEditor1').igTextEditor({
    width: 220
});
$('#textEditor2').igTextEditor({
    width: 220
});
. . .

Image:

vCard 사양

igQRCodeBarcode에서 가장 중요한 것은 데이터입니다. vCard를 만들려면 몇 가지 사양을 따라야 합니다. vCard는 하나 이상의 속성 모음이며 속성은 고유하게 명명된 값입니다. 정보를 올바르게 인코딩하려면 해당 속성에 값을 연결해야 합니다. 우리는 몇 가지 속성과 여기에 데이터를 첨부하는 방법을 살펴볼 것입니다.  모든 vCard는 "BEGIN:VCARD"로 시작하고 그 뒤에 "VERSION:2.1" 버전이 오고 "END:VCARD"로 끝납니다. 다른 속성은 원하는 순서로 정의할 수 있습니다. 속성의 전체 목록은 Wikipedia에서 찾을 수 있습니다.

사용 방법에 대한 힌트를 제공하기 위해 몇 가지 속성을 살펴볼 것입니다. "N" 값은 vCard와 연결된 사람, 장소 또는 사물을 지정하는 name 속성에 해당합니다. Formatted name 속성은 이름이 표시되는 방식을 지정합니다. 이 속성의 고유 이름은 "FN"입니다. 이 두 속성에는 카드와 연결된 사람, 사물 또는 장소의 이름에 대한 필드와 필요한 경우 접미사 및 접두사에 대한 필드가 있습니다. igTextEditor 메서드를 사용하여 입력에서 값을 가져온 다음 해당 값을 연결하여 유효한 문자열을 만듭니다.

var prefix = $("#textEditor").igTextEditor("text");
var firstName = $("#textEditor1").igTextEditor("text");
var middleName = $("#textEditor2").igTextEditor("text");
var secondName = $("#textEditor3").igTextEditor("text");
 
if (prefix != "" || prefix != null) {
    if (middleName != "" || middleName != null) {
        barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + ";" + prefix + "\r\n";
        barcodeFN = "FN" + prefix + firstName + " " + middleName + " " + secondName + "\r\n";
    }
    else {
        barcodeN = "N:" + secondName + ";" + firstName + ";" + prefix + "\r\n";
        barcodeFN = "FN" + prefix + firstName + " " + secondName + "\r\n";
    }
}
else {
    if (middleName != "" || middleName != null) {
        barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + "\r\n";
        barcodeFN = "FN" + firstName + " " + middleName + " " + secondName + "\r\n";
    }
    else {
        barcodeN = "N:" + secondName + ";" + firstName + "\r\n";
        barcodeFN = "FN" + firstName + " " + secondName + "\r\n";
    }
}

별도의 vCard 속성에 해당하는 별도의 값을 포함하는 입력의 경우 value 메소드를 덮어씁니다. 이러한 텍스트 편집기에서 적절한 템플릿을 추가합니다. 예를 들어 휴대 전화 입력의 경우 다음과 같은 종류의 템플릿이 필요합니다. 세포; VOICE:{0}\r\n" 여기서 {0} 기호는 입력 텍스트로 바뀝니다.

var originalValue = $.ui.igTextEditor.prototype.value;
$.widget("ui.igTextEditor", $.extend({}, $.ui.igTextEditor.prototype, {
    value: function () {
        if ((val = originalValue.apply(this, arguments))) {
            return this.options.outputTemplate.replace("{0}", val);
        }
        return val;
    }
}));

$('#textEditor4').igTextEditor({
        width: 220,
        outputTemplate: "EMAIL;INTERNET:{0}\r\n"
    });
    $('#textEditor5').igTextEditor({
        width: 220,
        outputTemplate: "TEL;HOME;VOICE:{0}\r\n"
    });
    $('#textEditor6').igTextEditor({
        width: 220,
        outputTemplate: "TEL;CELL;VOICE:{0}\r\n"
    });
    $('#textEditor7').igTextEditor({
        width: 220,
        outputTemplate: "ORG:{0}\r\n"
    });
    $('#textEditor8').igTextEditor({
        width: 220,
        outputTemplate: "TITLE:{0}\r\n"
    });
    $('#textEditor9').igTextEditor({
        width: 220,
        outputTemplate: "EMAIL;PREF;INTERNET:{0}\r\n"
    });
    $('#textEditor10').igTextEditor({
        width: 220,
        outputTemplate: "TEL;WORK;VOICE:{0}\r\n"
    });
    $('#textEditor11').igTextEditor({
        width: 220,
        outputTemplate: "URL:{0}\r\n"
    });

요약

전자 명함을 바코드로 만드는 것은 휴대폰에 새 연락처를 추가하거나 누군가에 대한 정보를 받을 수 있는 현대적이고 편리한 방법입니다. vCard에는 이름, 전화 번호 및 이메일과 같은 개인 데이터에서 시작하여 사무실 주소, 직위, 사무실 이름 및 회사 전화 번호 및 이메일과 같은 비즈니스에 대한 정보로 이어지는 다양한 정보가 포함되어 있습니다. QR 코드에 모든 정보를 추가하면 가독성이 더 어려워지지만 igQRCodeBarcode는 생성된 코드의 크기, 가독성 및 위치를 최적화하기 위한 여러 옵션을 지원합니다.

​jsFiddle에서 QRCodeBarcode 생성기의 라이브 데모를 보거나 샘플을 다운로드하십시오.

Twitter에서 팔로우할 수 있습니다.@ Infragistics그리고 계속 연락하세요페이스북,구글+그리고링크드인!