ホームページ > 記事 > ウェブフロントエンド > jqueryを使用して中央にロゴのあるQRコードを生成するにはどうすればよいですか? (コード付き)
jqueryを使用して中央にロゴのあるQRコードを生成するにはどうすればよいですか? (コード付き)
- yuliaオリジナル
- 2018-09-13 16:34:012180ブラウズ
jquery.qrcode.js は、クライアント上でマトリックス QR コード QRCode を生成できる jquery プラグインで、ページ上に 2D バーコードを簡単に生成できます。このプラグインは独立して使用でき、サイズは比較的小さく、gzip 圧縮後は 4 kb 未満です。クライアント上で直接生成されるバーコードであるため、画像のダウンロードプロセスがなく、迅速に生成できます。これは、多言語クラス ライブラリに基づいてカプセル化されており、他の追加サービスには依存しません。
利点: jquery-qrcode を使用する利点は、サーバー側で冗長な QR コード画像を生成する必要がないことです。QR コードは JavaScript を通じてクライアント側で直接生成され、帯域幅とメンテナンスのコストが効果的に削減されます。
まず、jquery.qrcode.js の公式 Web サイトをご覧ください。公式 Web サイトにはサンプルもあります。ただし、公式 Web サイトの jquery.qrcode.js は中国語をサポートしていません。さっそく始めましょう。公式 Web サイトの qrcode.js ファイルには中国語のサポートとロゴの追加が実装されていません。このファイルを 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: 'photo.jpg' //二维码中间的图片
});
});
</script>
</head>
<body>
<center>
<h2>该二维码支持中文和LOGO</h2>
<div id="qrcodeCanvas"></div>
</center>
</body>
</html>以上がjqueryを使用して中央にロゴのあるQRコードを生成するにはどうすればよいですか? (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。