- 締切済み
node-qrcodeのQRコードを画像で取得
以前QRcode.jsで出力したQRコードを画像で取得する方法を教えてもらいましたが・・https://okwave.jp/qa/q100 今回は下記のようなnode-qrcodeを使った場合どうすれば出来るかお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { let info = "ひらがなQRサンプル" ; const options = { width: 128, height: 128, color: { dark: "#000000", // QRコードの自体 light: "#ffffff", // QRコードの背景 }, }; QRCode.toDataURL(info, options) .then((url) => { document.getElementById("qrcode").src = url; }) .catch((err) => { console.error(err); }); }); </script> </head> <body> <img id="qrcode" alt="QRコード" /> </body> </html> 前回のように 「QRコードを生成しているスクリプトの後ろに var canv = document.getElementsByTagName("canvas"); var image = canv[0].toDataURL("image/jpeg", 0.75 ); と書き足せば image 変数の中にJPEGデータが生成されます。」 では駄目でした。 よろしくお願いいたします。
- turu575
- お礼率80% (91/113)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率89% (2715/3019)
あなたが提供したコードを見ると、node-qrcodeを使用してQRコードをデータURLとして生成し、HTMLの`<img>`タグの`src`属性に代入することで画像として表示していますね。この方法は直接canvasタグを用いているわけではないため、canvas要素を参照する以前のアドバイスが適用できません。 代わりに、`toDataURL`メソッドが返したデータURLは、すでにエンコードされた画像データを含んでいて、`<img>`タグの`src`として設定すると画面に表示されます。あなたがもし画像データをそれ以上に操作したいのであれば、`url`変数に格納されているそのデータURLを利用することができます。例えば、データURLを元に、新しいImageオブジェクトを作成したり、Ajaxでサーバーに送信したりすることが可能です。 以下に、あなたのコードを利用して、QRコードのデータURLを取得し、さらなる処理のために使用する方法を示します。 ```javascript document.addEventListener("DOMContentLoaded", () => { let info = "ひらがなQRサンプル"; const options = { width: 128, height: 128, color: { dark: "#000000", // QRコードの本体 light: "#ffffff", // QRコードの背景 }, }; QRCode.toDataURL(info, options) .then((url) => { // QRコードの画像を画面に表示 document.getElementById("qrcode").src = url; // ここから追加: QRコードのデータURLを使ってさらなる処理を行う // 例: 新しいImageオブジェクトを作成する var img = new Image(); img.src = url; img.onload = function() { // ここで画像が読み込まれた後の処理を行います console.log('Image loaded from data URL!'); // 例えば、画像をCanvasに描画するなど var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // または、データURLをそのままサーバーに送信することも可能です }; // その他の例: ブラウザで直接ダウンロード var downloadLink = document.createElement('a'); downloadLink.href = url; downloadLink.download = 'qrcode.png'; downloadLink.click(); }) .catch((err) => { console.error(err); }); }); ``` 上記のコードでは、QRコードがロードされた際にそれをImageオブジェクトにセットし、そのImageオブジェクトを使用して任意の処理を行う方法と、データURLをダウンロードリンクに設定してユーザーにダウンロードさせる方法を示しています。これらの手法はあなたの必要に合わせてカスタマイズが可能です。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
お礼
コードを実行してみる // その他の例: ブラウザで直接ダウンロード の部分はなんとなく分かるが >`url`変数に格納されているそのデータURLを利用することができます。 とあるが残念ながら私には、filemakerのスクリプトで使うため function imageDownload() { const canvas = document.getElementsByTagName("canvas")[0]; const image = canvas.toDataURL(); FileMaker.PerformScript("script03", image); } の形にしたいがどうすればいいのか分からない
補足
試行錯誤の結果、単純に質問の元コードに下記を追加してbase64の画像(リンク)を引数として取得して、オブジェクトフィールドにデコード結果としてQRコードを表示させることが出来た。 function imageDownload() { var image = document.getElementById("qrcode").src; FileMaker.PerformScript("script03",image); } canvasにとらわれすぎていた。