QRコードなどcanvasに書かれたものをtoDataURLを使ってimageにして新しいウィンドウに渡す

今回は、JSのフレームワークのモジュールなどを使ってcanvasに描いたQRコードをtoDataURLを使って画像化して新しいウィンドウに渡す方法をご紹介いたします。



QRコードなどcanvasに書かれたものをtoDataURLを使ってimageにして新しいウィンドウに渡す

ほぼメモ書きに近いです。

Angularを使っていて、QRコードの実装がしたく、angularx-qrcodeのモジュールを使ってQRコードを実装しましたが、その作成したQRコードを新規ウィンドウで表示させる必要がありました。

新規ウィンドウはwindow.openを使って生のJSで書かれており、Angularのコードで書くことができません。
開発者ツールでソースを表示させてみると、angularx-qrcodeで作成したQRコードはcanvasで描かれているようでした。

最初はcanvasをouterHTMLでそのまま持っていこうとしましたが、真っ白でうまく表示されませんでした。

結論を言うと、canvas.toDataURL()を使ってimage化してimgタグにsrc指定させることで新しいウィンドウに表示することができました。

下記はサンプルソースの一部です。

終わりに

今回は、JSのフレームワークのモジュールなどを使ってcanvasに描いたQRコードをtoDataURLを使って画像化して新しいウィンドウに渡す方法をご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






JavaScript

Posted by ちこ