Q&A
ソースコードを見る限りでは、そういうことはできなさそうに思いますが、何かを参考にしたのですか？
https://github.com/jeromeetienne/jquery-qrcode/blob/master/src/jquery.qrcode.js#L85
実現したいこと
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>
回答3件
0
jquery-qrcodeについで、オプションのrenderはsvgが指定できましたか？
確か、canvasかtableを指定して、任意の要素内にその要素を生成・描画する仕組みだったと覚えます。
例えばですが、以下のような実装を検討してみてはいかがでしょうか。
renderにtableを指定して、#qrcode内に<table>を生成・描画する#qrcode内の<tr>と<td>を取得してセル単位での色を判定する(<td>のbackground-colorを参照すれば判定可能です)- セルが黒色の場合に以下の参考記事のような手法でSVG内に四角を描画
- 生成したSVGをダウンロードする
投稿2024/03/23 15:41
総合スコア527
0
被っているかもしれませんがこんな感じ
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
総合スコア114843
0
ベストアンサー
こちらでどうでしょうか？
案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
総合スコア12
ありがとうございます。案１のほうが生成されたSVGファイルのサイズも小さく生成されました。しかし、Adobe Expressで生成したものはMicrosoft OfficeのWordなどに挿入しても使用できますが、こちらは挿入しても透明となってしまっています。Adobeのほうは背景が白のようです。SVGにstyleでsvg{background-color: white;}と書いてみましたが駄目でした。どうしてでしょうか。
Wordなどでも表示できるように修正したものを記載してみました。
ありがとうございます。しかし、その修正案では、ベクターではなくビットマップで生成されて、拡大するとぼやけてしまい、SVGの意味がありません。Officeでも使用できるQRコードのSVGを生成するアプリを作ることは難しいのでしょうか。
元々質問者様が提示していたソースのQRコードライブラリではCanvasかテーブル形式でしかQRを生成できず、SVGに変換しても元データがSVGではないため、ぼけやるのかと思います。
回答を追記し、別のライブラリを利用した「QRをSVGで生成」を作成してみましたのでこちらではいかがでしょうか？
ありがとうございます。そのライブラリの、ていきょうしていただいたソースで生成したQRコードはOfficeでも使用可能で、ベクター画像です。解決しました。
あなたの回答
tips
プレビュー
