jquery.qrcode.js を使用して生成したQRコードをPNG画像として保存する
jquery.qrcode.jsとは
jquery.qrcode.js
http://jeromeetienne.github.io/jquery-qrcode/
- QRコードを生成するjQueryプラグイン
- 画像は生成されず、tableタグまたはcanvasタグで描画することができる。
- ソースはGitHubで公開されている。
使用手順
- GitHubから jquery.qrcode.min.js をダウンロードし、jQuery本体よりあとで読み込む
- HTML側に描画スペースを用意
- 用意した要素に対して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）を指定できる。
- サンプル：https://hi3103.net/study/1903-qrcode/sample-1.html
- 何も指定しないと 256*256 の 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
- HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ – Qiita
- javascript – toDataURL not a function – Stack Overflow
【成功例】ボタンクリックでPNG画像をダウンロードできるようにする（2019-04-15追記）
-
Chromeはブラウザの仕様で data:image/png;base64, …をそのまま開くことができない。
- 上述の window.open() のほか、location.href で直接指定してもダメだった。
- 以下のエントリーのソースを頂戴して「ボタンクリックでPNG画像をダウンロード」するようにした。
- サンプル：https://hi3103.net/study/1903-qrcode/sample-3.html
$(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画像として保存できないか？
結論：できなかった。
試したものは以下。
- fabric.jsの toSVG()メソッド
- CreateJSのEaselJSに同梱されている試験的な機能：SVGExporter
いずれもcanvasの機能拡張的なライブラリで、canvasをSVGに変換・書き出しする機能は備わっているが、
- 描画領域をセット
- 描画する
- 描画したものを書き出す
という工程になっているため、「すでに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);
});
});