QRコードのSVGをJavaScriptで生成したい

実現したいこと

HTMLとJavaScriptで、指定された文字列のQRコードを生成し、表示して、ダウンロードが押されたらSVGとしてダウンロードするアプリを作りたい。

発生している問題

上記のアプリを作ってみたのですが、SVGの生成方法がわかりませんでした。さらに、今の状態では保存もされませんでした。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>QRコードSVG生成アプリ</title>
7    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
8    <script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
9</head>
10<body>
11    <p style="font-size: 32px;">QRコードSVG生成アプリ</p>
12    <input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
13    <button onclick="generateQR()">QRコード生成</button>
14    <div id="qrcode"></div>
15    <a id="downloadLink" style="display: none;">QRコードをダウンロード</a>
16    <script>
17function generateQR() {
18    var inputText = $("#inputText").val();
19
20    // QRコードを生成
21    $("#qrcode").empty().qrcode({
22        text: inputText,
23        render: 'svg', // SVG形式のQRコードを生成
24        fill: '#000',
25        background: '#fff',
26        size: 256
27    });
28
29    // ダウンロードリンクの表示
30    var svgString = $("#qrcode svg")[0].outerHTML;
31    var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成
32    var downloadLink = document.getElementById("downloadLink");
33    downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
34    downloadLink.download = fileName;
35    downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定
36    downloadLink.style.display = "inline"; // displayをinlineに変更
37}
38
39function generateRandomString() {
40    return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成
41}
42</script>
43</body>
44</html>

Lhankor_Mhy

2024/03/23 16:04

ソースコードを見る限りでは、そういうことはできなさそうに思いますが、何かを参考にしたのですか？ https://github.com/jeromeetienne/jquery-qrcode/blob/master/src/jquery.qrcode.js#L85

行動規範の内容に同意します

回答3件

jquery-qrcodeについで、オプションのrenderはsvgが指定できましたか？
確か、canvasかtableを指定して、任意の要素内にその要素を生成・描画する仕組みだったと覚えます。
例えばですが、以下のような実装を検討してみてはいかがでしょうか。

renderにtableを指定して、#qrcode内に<table>を生成・描画する
#qrcode内の<tr>と<td>を取得してセル単位での色を判定する(<td>のbackground-colorを参照すれば判定可能です)
セルが黒色の場合に以下の参考記事のような手法でSVG内に四角を描画
生成したSVGをダウンロードする

参考: JavaScriptでSVGタグ作成。 #JavaScript - Qiita

投稿2024/03/23 15:41

Refrain

総合スコア539

被っているかもしれませんがこんな感じ

javascript
1<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
3<script>
4function generateQR() {
5    var size=256;
6    var inputText = $("#inputText").val();
7
8    $("#qrcode").empty().qrcode({
9        text: inputText,
10        render: 'table',
11        fill: '#000',
12        background: '#fff',
13        size: size
14    });
15    var w=$("#qrcode table tr").length; 
16    var data=$("#qrcode table tr").map(function(){
17      return Array($(this).find("td").map(function(){
18         return $(this).css("background-color")=="rgb(0, 0, 0)"
19      }).get());
20    }).get();
21    var nl="\n";
22    var svg=data.map(function(data,x){
23      return data.map(function(data,y){;
24        var color=data?"#000":"#fff";
25        return "<rect x=\""+x+"\" y=\""+y+"\" fill=\""+color+"\" />";
26      }).join(nl);
27    }).join(nl);
28    var svg="<svg  xmlns=\"http://www.w3.org/2000/svg\" width=\""+size+"\" height=\""+size+"\" viewBox=\"0 0 "+w+" "+w+"\">"+nl+"<style>rect{width:1px;height:1px;}</style>"+nl+svg+nl+"</svg>";
29    var blob=new Blob([svg],{"type":"text"});  
30    $("#downloadLink").prop({'href':URL.createObjectURL(blob),"download":"test.svg"});
31 }
32</script>
33<p style="font-size: 32px;">QRコードSVG生成アプリ</p>
34<input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
35<button onclick="generateQR()">QRコード生成</button>
36<div id="qrcode"></div>
37<a id="downloadLink">QRコードをダウンロード</a>

投稿2024/03/25 02:16

yambejp

総合スコア116443

ベストアンサー

こちらでどうでしょうか？

案1　テーブルとしてQRが生成されるためテーブルをSVG変換

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QRコードSVG生成アプリ</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
</head>

<body>
	<p style="font-size: 32px;">QRコードSVG生成アプリ</p>
	<input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
	<button onclick="generateQR()">QRコード生成</button>
	<div id="qrcode"></div>
	<a id="downloadLink" style="display: none;">QRコードをダウンロード</a>
	<script>
		function generateQR() {
			var inputText = $("#inputText").val();

			// QRコードを生成
			$("#qrcode").empty().qrcode({
				text: inputText,
				render: 'table',
				fill: '#000',
				background: '#fff',
				size: 256
			});

			var svgString = convertDomIntoSVG($("#qrcode table"));
			// ダウンロードリンクの表示
			var svgString = $("#qrcode svg")[0].outerHTML;
			var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成
			var downloadLink = document.getElementById("downloadLink");
			downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
			downloadLink.download = fileName;
			downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定
			downloadLink.style.display = "inline"; // displayをinlineに変更
		}

		function generateRandomString() {
			return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成
		}
		//---------------------------------
		//HTML要素をSVG要素に変換
		//引数1:$dom    html dom
		//返り値:svgの要素
		//---------------------------------
		function convertDomIntoSVG(dom) {
			let width = dom.get(0).scrollWidth;
			let height = dom.get(0).scrollHeight;
			let svgString = "<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" +
				"<foreignObject width='100%' height='100%'>" +
				"<div xmlns='http://www.w3.org/1999/xhtml'>" +
				dom.prop('outerHTML') +
				"</div>" +
				"</foreignObject>" +
				"</svg>";
			document.getElementById("qrcode").innerHTML = svgString;
		}
	</script>
</body>

</html>

案２別のライブラリを利用
https://github.com/datalog/qrcode-svg?tab=readme-ov-file

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QRコードSVG生成アプリ</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
	<script src="https://datalog.github.io/demo/qrcode-svg/qrcode.min.js"></script>
</head>

<body>
	<p style="font-size: 32px;">QRコードSVG生成アプリ</p>
	<input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
	<button onclick="generateQR()">QRコード生成</button>
	<div id="qrcode"></div>
	<a id="downloadLink" style="display: none;">QRコードをダウンロード</a>
	<script>
		function generateQR() {
			var inputText = $("#inputText").val();

			// QRコードを生成
			$("#qrcode").empty;
			var svg = new QRCode({
				msg: inputText,
				dim: 300,
				pad: 6,
				mtx: 7,
				ecl: "H",
				ecb: 0,
				pal: ["#000000", "#fff"],
				vrb: 1
			})
			$("#qrcode").append(svg);

			// ダウンロードリンクの表示
			var svgString = $("#qrcode svg")[0].outerHTML;
			var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成
			var downloadLink = document.getElementById("downloadLink");
			downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
			downloadLink.download = fileName;
			downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定
			downloadLink.style.display = "inline"; // displayをinlineに変更
		}

		function generateRandomString() {
			return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成
		}
	</script>
</body>

</html>

修正案

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QRコードSVG生成アプリ</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.rawgit.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
</head>

<body>
	<p style="font-size: 32px;">QRコードSVG生成アプリ</p>
	<input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
	<button onclick="generateQR()">QRコード生成</button>
	<div id="qrcode"></div>
	<div id="svgarea"></div>
	<a id="downloadLink" style="display: none;">QRコードをダウンロード</a>
	<script>
		function generateQR() {
			var inputText = $("#inputText").val();
			// QRコードを生成
			$("#qrcode").empty().qrcode({
				text: inputText,
				render: 'canvas',
				fill: '#000',
				background: '#fff',
				size: 256
			});
			$("#qrcode canvas").css('display', 'none');
			createSVG($("#qrcode canvas")[0]);
			// ダウンロードリンクの表示
			var svgString = $("#qrcode svg")[0].outerHTML;
			var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成
			var downloadLink = document.getElementById("downloadLink");
			downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
			downloadLink.download = fileName;
			downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定
			downloadLink.style.display = "inline"; // displayをinlineに変更
		}

		function generateRandomString() {
			return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成
		}

		function createSVG(canvas) {
			var width = canvas.width;
			var height = canvas.height;
			// SVGのnamespace付きでElementを作成する
			var svg = createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink" });
			$("#qrcode").append(svg); // "#qrcode" 配下にsvgを追加する
			var defs = createElement("defs");
			svg.appendChild(defs);
			// fill用にpatternを作成
			var pattern = createElement("pattern", { id: "img", x: 0, y: 0, width: width, height: height, patternUnits: "userSpaceOnUse" });
			defs.appendChild(pattern);
			// patternに使うimageを作成
			var image = createElement("image", { x: 0, y: 0, width: width, height: height });
			image.setAttribute("href", canvas.toDataURL()); // xlink:hrefをhrefに変更
			pattern.appendChild(image);
			// 角丸の四角形を作り、上のパターンで塗りつぶす
			var rect = createElement("rect", { x: 0, y: 0, width: width, height: height, rx: 0, ry: 0, fill: "url(#img)" });
			svg.appendChild(rect);
		};

		// SVGのnamespace付きでElementを作成する
		function createElement(tag, attributes) {
			var ret = document.createElementNS("http://www.w3.org/2000/svg", tag);
			if (ret && attributes) {
				for (var key in attributes) {
					var value = attributes[key];
					ret.setAttribute(key, value);
				}
			}
			return ret;
		};
	</script>
</body>

</html>

QRをSVGで生成
利用ライブラリ：https://www.jsdelivr.com/package/npm/qrcode-svg

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QRコードSVG生成アプリ</title>
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/qrcode-svg@1.1.0/lib/qrcode.min.js"></script>
</head>

<body>
	<p style="font-size: 32px;">QRコードSVG生成アプリ</p>
	<input type="text" id="inputText" placeholder="QRコードに変換するテキストを入力" value="https://">
	<button onclick="generateQR()">QRコード生成</button>
	<div id="qrcode"></div>
	<a id="downloadLink" style="display: none;">QRコードをダウンロード</a>
	<script>
		function generateQR() {
			// 入力値
			var inputText = $("#inputText").val();

			// QRコードのパラメータ
			const param = {
				content: inputText,
				padding: 0,
				width: 256,
				height: 256,
				color: "#000000",
				background: "#ffffff",
				ecl: "M",
				join: true,
			};
			// QRコードを初期化し、SVGを生成
			$("#qrcode").empty().append(new QRCode(param).svg());

			// ダウンロードリンクの表示
			var svgString = $("#qrcode svg")[0].outerHTML;
			var fileName = "QRcode_" + inputText + "_" + generateRandomString() + ".svg"; // ファイル名の生成
			var downloadLink = document.getElementById("downloadLink");
			downloadLink.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString);
			downloadLink.download = fileName;
			downloadLink.innerText = "QRコードをダウンロード"; // リンクのテキストを設定
			downloadLink.style.display = "inline"; // displayをinlineに変更
		}

		function generateRandomString() {
			return Math.random().toString(36).substring(2, 8); // ランダムな文字列を生成
		}
	</script>
</body>

</html>

投稿2024/03/23 18:58

編集2024/03/27 07:07

lovam-nm

総合スコア18

KAN-KOFUN

2024/03/24 12:56

ありがとうございます。案１のほうが生成されたSVGファイルのサイズも小さく生成されました。しかし、Adobe Expressで生成したものはMicrosoft OfficeのWordなどに挿入しても使用できますが、こちらは挿入しても透明となってしまっています。Adobeのほうは背景が白のようです。SVGにstyleでsvg{background-color: white;}と書いてみましたが駄目でした。どうしてでしょうか。