jquery를 사용하여 중간에 로고가 있는 QR 코드를 생성하는 방법은 무엇입니까? (코드 포함)-JS 튜토리얼-php.cn

jquery를 사용하여 중간에 로고가 있는 QR 코드를 생성하는 방법은 무엇입니까? (코드 포함)

yulia

풀어 주다： 2018-09-13 16:34:01

원래의

2153명이 탐색했습니다.

jquery.qrcode.js는 클라이언트에서 매트릭스 QR 코드 QRCode를 생성할 수 있는 jquery 플러그인입니다. 페이지에서 2D 바코드를 쉽게 생성하는 데 사용할 수 있습니다. 이 플러그인은 독립적으로 사용할 수 있으며 gzip 압축 후 4kb 미만으로 크기가 상대적으로 작습니다. 클라이언트에서 직접 생성한 바코드이기 때문에 이미지 다운로드 과정이 필요 없고 빠르게 생성이 가능합니다. 다국어 클래스 라이브러리를 기반으로 캡슐화되어 있으며 다른 추가 서비스에 의존하지 않습니다.

이점: jquery-qrcode를 사용하면 서버 측에서 중복된 QR 코드 이미지를 생성할 필요가 없다는 이점이 있습니다. QR 코드는 JavaScript를 통해 클라이언트 측에서 직접 생성되므로 대역폭과 유지 관리 비용이 효과적으로 절감됩니다.

우선 jquery.qrcode.js 공식 홈페이지에서 예제도 보실 수 있습니다. 그러나 공식 웹사이트의 jquery.qrcode.js는 중국어를 지원하지 않습니다. 이제 시작해 보겠습니다. 공식 홈페이지의 qrcode.js 파일은 중국어 지원 및 LOGO 추가를 구현하지 않았습니다. 이제 이 파일을 jquery.qrcode.js 파일로 수정했습니다. 또한 중국어 트랜스코딩을 위한 파일인 utf.js도 필요합니다. 그런 다음 utf.js 파일의 utf16to8(str) 메서드가 jquery.qrcode.js 파일에서 호출되어 중국어를 트랜스코딩합니다.

다음은 제가 작성한 예시입니다. 이 예시에 필요한 js 파일은 jquery.qrcode.js와 utf.js 그리고 jquery-1.8.0.js입니다. 클릭하여 다운로드할 수 있는 로고 사진도 있습니다. 호출되는 jsp 코드는 다음과 같습니다.

  <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>该二维码支持中文和LOGO</title>
  
  <script type="text/javascript" src="jquery-1.8.0.js"></script>
 <script type="text/javascript" src="utf.js"></script>
 <script type="text/javascript" src="jquery.qrcode.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $("#qrcodeCanvas").qrcode({
             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
             width : "200",               //二维码的宽度
             height : "200",              //二维码的高度
             background : "#ffffff",       //二维码的后景色
             foreground : "#000000",        //二维码的前景色
             src: &#39;photo.jpg&#39;             //二维码中间的图片
         });
     });
 </script>
 
 </head>
 <body>
     <center>
       <h2>该二维码支持中文和LOGO</h2>
       <div id="qrcodeCanvas"></div>
     </center>
 </body>
 </html>

로그인 후 복사

위 내용은 jquery를 사용하여 중간에 로고가 있는 QR 코드를 생성하는 방법은 무엇입니까? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!