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

2021年10月23日

今回は、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指定させることで新しいウィンドウに表示することができました。

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

const canvas = document.getElementsByTagName("canvas")[0];
const qrDataURI = canvas.toDataURL()

let newWindow = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
newWindow.document.open();
newWindow.document.write(`
<html>
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload = () => {
                window.drawCanvas();
            }
            function drawCanvas() {
                let image = document.getElementById("output");
                image.src = "${qrDataURI}";
            }
        </script>
    </head>
    <body>
        <img id="output" src="">
    </body>
</html>`
);