jquery.qrcode.js を使用して生成したQRコードをPNG画像として保存する

2019-03-31 23:50
WEB

jquery.qrcode.jsとは

jquery.qrcode.js

http://jeromeetienne.github.io/jquery-qrcode/

  • QRコードを生成するjQueryプラグイン
  • 画像は生成されず、tableタグまたはcanvasタグで描画することができる。
  • ソースはGitHubで公開されている。

使用手順

  1. GitHubから jquery.qrcode.min.js をダウンロードし、jQuery本体よりあとで読み込む
  2. HTML側に描画スペースを用意
  3. 用意した要素に対してjQueryスクリプトを記述

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>1903-qrcode</title>
</head>
<body>
	<!-- 描画スペースの用意 -->
	<div id="hoge"></div>

	<!-- js読み込み -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
	<script type="text/javascript" src="jquery.qrcode.min.js"></script>

	<!-- スクリプトを記述 -->
	<script>
		$(function(){
			$('#hoge').qrcode('ここにQRコード化したい文字列をいれる');
		});
	</script>
</body>
</html>
  • 現在表示しているページのURLを取得してQRコード化する場合は、引数に location.href を指定する。
$(function(){
	//現在表示しているページのURLをQRコード化する
	$('#hoge').qrcode(location.href);
});
  • オプションでQRコードの横幅、縦幅、レンダリング方法（tableまたはcanvas）を指定できる。 
$(function(){
	//現在表示しているページのURLをQRコード化する
	$('#hoge').qrcode({
		text: location.href,
		width: 600, //横幅
		height: 600, //縦幅
		render: 'canvas', //tableまたはcanvas
	});
});

参考URL

ブラウザの機能でPNG画像として保存する

FirefoxおよびChromeでは単純に「右クリックで保存」すると、PNG画像として保存することができた。

  • 動作環境
    • Mac OS Mojave 10.14.4
  • ブラウザ・バージョン
    • Mozilla Firefox 66.0.2
    • Google Chrome 73.0.3683.86

なお、Safari 12.1 でも試したがこちらは動作せず。

また、iOSではどのブラウザでも画像としての保存はできなかった（iOS 12.1.4 のSafari、Chrome 73.0.3683.68、Firefox 15.1で確認）。

canvas の toDataURL()メソッドでPNG画像を出力する

【失敗例】QRコードをクリックするとPNG画像が別窓で開くようにする

【2019-04-15追記】このソース、Firefoxでは動くけど、Chromeだと動かないことに気づきました。

$(function(){
	//現在表示しているページのURLをQRコード化する
	$('#hoge').qrcode(location.href);

	//生成されたQRコード(=canvas要素)を変数にセット
	var canvas = $('#hoge canvas');

	//クリックできることを明示するためcssでカーソル種類を指定
	canvas.css('cursor','pointer');

	//QRコードがクリックされたらPNG画像が新しい窓で開く
	canvas.click(function() {
		var data = canvas[0].toDataURL('image/png');
		window.open(data);
	});
});

もしもJPEG画像として出力したい場合は toDataURL の引数を image/jpeg に変更する。

var data = canvas[0].toDataURL('image/jpeg');
参考URL

【成功例】ボタンクリックでPNG画像をダウンロードできるようにする（2019-04-15追記）

$(function(){
	//現在表示しているページのURLを取得し、QRコードを生成
	$('#hoge').qrcode(location.href);

	//生成されたQRコード(=canvas要素)にIDを付与し、非表示にする
	$('#hoge canvas').attr('id','piyo').css('display','none');

	//ダウンロードボタンを生成
	$('#hoge').append('<button onclick="saveCanvas();">QRコードをダウンロードする</button>');
});

//--- ここから下は https://oar.st40.xyz/article/133 の内容を頂戴しました ----//

// canvas上のイメージを保存
function saveCanvas(){
	//ファイルタイプとファイル名を指定
	var imageType = 'image/png';
	var fileName = 'qrcode.png';
	
	//特定のIDが付与された要素を変数にセット
	var canvas = document.getElementById('piyo');

	// base64エンコードされたデータを取得 「data:image/png;base64,iVBORw0k～」
	var base64 = canvas.toDataURL(imageType);

	// base64データをblobに変換
	var blob = Base64toBlob(base64);

	// blobデータをa要素を使ってダウンロード
	saveBlob(blob, fileName);
}

// Base64データをBlobデータに変換
function Base64toBlob(base64){
	// カンマで分割して以下のようにデータを分ける
	// tmp[0] : データ形式（data:image/png;base64）
	// tmp[1] : base64データ（iVBORw0k～）
	var tmp = base64.split(',');
	// base64データの文字列をデコード
	var data = atob(tmp[1]);
	// tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
	var mime = tmp[0].split(':')[1].split(';')[0];
	//  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
	var buf = new Uint8Array(data.length);
	for (var i = 0; i < data.length; i++) {
		buf[i] = data.charCodeAt(i);
	}
	// blobデータを作成
	var blob = new Blob([buf], { type: mime });
	return blob;
}

// 画像のダウンロード
function saveBlob(blob, fileName){
	var url = (window.URL || window.webkitURL);
	// ダウンロード用のURL作成
	var dataUrl = url.createObjectURL(blob);
	// イベント作成
	var event = document.createEvent("MouseEvents");
	event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	// a要素を作成
	var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
	// ダウンロード用のURLセット
	a.href = dataUrl;
	// ファイル名セット
	a.download = fileName;
	// イベントの発火
	a.dispatchEvent(event);
}
【備考1】URLの余計なパラメータを除去する
  • 現在表示しているページに余計なパラメータがついていて、それを除去したい場合は、冒頭部分を以下のように書き換えればOK。
//現在表示しているページのURLを取得し、余計なパラメータを取る
var url = location.href;
url = url.replace(/\?.+$/,'');

//QRコードを生成
$('#hoge').qrcode(url);
【備考2】ダウンロードボタンだけを表示する
  • 大きめのQRコードを生成したいが、デカイと邪魔なのでQRコードは非表示にしておきたいという場合は、canvas属性にID付与する際にCSSで display:none を設定すればOK。
//生成されたQRコード(=canvas要素)にIDを付与し、非表示にする
$('#hoge canvas').attr('id','piyo').css('display','none');

生成したQRコードをSVG画像として保存できないか？

結論：できなかった。

試したものは以下。

いずれもcanvasの機能拡張的なライブラリで、canvasをSVGに変換・書き出しする機能は備わっているが、

  1. 描画領域をセット
  2. 描画する
  3. 描画したものを書き出す

という工程になっているため、「すでにjquery.qrcode.jsによって描写されたcanvasをSVGに書き出す」ことができなかった。

以下、動かなかったソースのメモ。

// ※失敗作※ canvasのガワだけの状態 (canvasのwidth・heightの情報だけは持っている白紙のSVG) が出力される
$(function(){
	//現在表示しているページのURLをQRコード化する
	$('#hoge').qrcode(location.href);

	//生成されたQRコード(=canvas要素)をidを付与
	$('#hoge canvas').attr('id','piyo');

	//描画領域をセット
	var stage = new createjs.Stage('piyo');

	//QRコードがクリックされたらsvgデータが出力される
	$('#hoge').click(function() {
		exporter = new SVGExporter(stage, false, false, false);
		exporter.run();
		document.body.appendChild(exporter.svg);
	});
});

参考URL