>웹 프론트엔드 >JS 튜토리얼 >QR 코드 생성 방법 요약_javascript 기술

QR 코드 생성 방법 요약_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:24:241528검색

인터넷의 급속한 발전으로 QR코드의 활용이 더욱 많아질 것입니다. 동시에, 대부분은 평범한 QR 코드입니다. 손을 잡고 이 QR 코드를 디자인해 보세요. 다음은 공유된 아주 좋은 QR 코드 디자인입니다.

QR 코드 원리:

2D 바코드/QR 코드는 스택/라인 2D 바코드와 매트릭스 2D 바코드로 나눌 수 있습니다. 적층형/선형 2D 바코드는 짧은 1차원 5 바코드를 여러 줄로 쌓아서 구성되며, 매트릭스 2D 바코드는 매트릭스로 구성되며 매트릭스의 해당 요소 위치에 이진 "점"을 표시하는 데 "점"이 사용됩니다. . 1", "empty"를 사용하여 이진수 "0"을 나타내고, "dot"과 "empty"의 배열이 코드를 구성합니다.

최근 QR코드에 관심을 가지게 되면서 QR코드에 대해 연구하게 되었습니다. 여기서 탄생한 QR코드라는 용어는 내결함성이 더 뛰어납니다.

데이터 표현 방법

어두운 모듈은 이진수 "1"을 나타내고 밝은 모듈은 이진수 "0"을 나타냅니다.
오류수정 능력
· 레벨 L: 데이터 코드워드의 약 7% 수정 가능
· M 레벨: 데이터 코드워드의 약 15% 수정 가능
· Q레벨: 데이터 코드워드의 약 25% 수정 가능
· 레벨 H: 데이터 코드워드의 약 30% 수정 가능

위 디자인은 qrcode의 내결함성을 완벽하게 활용한 것으로 매우 훌륭하고 창의적입니다! !

1.google 인터페이스

코드 복사 코드는 다음과 같습니다.

                    $urlToEncode="http://www.csd2n.net";//QR 코드를 생성하는 URL
Google에서 QR 생성($urlToEncode);
              함수 generateQRfromGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0')
                                            {
$url = urlencode($url);
echo 'http://chart.apis.google.com/chart?chs='.$widhtHeight.'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.' |'.$margin.'&chl='.$chl.'" alt="QR 코드" widhtHeight="'.$size.'" widhtHeight="'.$size.'"/>'; //Google API 인터페이스, 실패할 경우 Google 웹사이트에서 최신 인터페이스를 확인할 수 있습니다
                }
                   ?>
 

2..js 코드를 캔버스로 변환(강조)

데모: http://hxend.com/jsqrcode/test/

코드 복사 코드는 다음과 같습니다.