質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

655閲覧

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

kofun

総合スコア12

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

3クリップ

投稿2024/03/23 13:51

実現したいこと

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>
takanaweb5👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

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

投稿2024/03/23 15:41

Refrain

総合スコア539

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

yambejp

総合スコア115286

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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>

案2別のライブラリを利用
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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kofun

2024/03/24 12:56

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

2024/03/24 16:08

Wordなどでも表示できるように修正したものを記載してみました。
kofun

2024/03/27 00:20

ありがとうございます。しかし、その修正案では、ベクターではなくビットマップで生成されて、拡大するとぼやけてしまい、SVGの意味がありません。Officeでも使用できるQRコードのSVGを生成するアプリを作ることは難しいのでしょうか。
lovam-nm

2024/03/27 07:11

元々質問者様が提示していたソースのQRコードライブラリではCanvasかテーブル形式でしかQRを生成できず、SVGに変換しても元データがSVGではないため、ぼけやるのかと思います。 回答を追記し、別のライブラリを利用した「QRをSVGで生成」を作成してみましたのでこちらではいかがでしょうか?
kofun

2024/03/28 10:13

ありがとうございます。そのライブラリの、ていきょうしていただいたソースで生成したQRコードはOfficeでも使用可能で、ベクター画像です。解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問