p5js(javaScript)でQRコードをcanvas上に表示してsaveCanvasしたい

Question

こんにちは．

私はp5jsというJavaScriptのためのクリエイティブコーディング言語を使用しています．
そして現在，「画像とQRコードを表示して保存する」といったことをやろうとしています．

画像のCanvas表示と保存は出来て，QRコードの表示もなんとか出来ました．
ですがQRコードを含めて保存する方法が上手くいかず困っております．

ここのコードを参考にQRコードの生成をしました．
https://editor.p5js.org/yeony102/sketches/Bk7-LWKgM

このコードではQRコードをDivで生成しています．
これをCanvasに追加しCanvasを画像として保存(saveCanvas)したいと思っています．

HTMLやJavaScriptの知識が浅いので，どなたかお力お貸しください．
よろしくお願いします．

let qrcode; 
let div;

function setup() { 
  createCanvas(260, 260);
  
 
  div = createDiv("");
  div.id("qrcode");
  
  div.style("width", "256px");
  div.style("height", "256px");
  div.style("padding", "2px");
  div.style("background-color", "grey");
  div.position(10,10);
  
  qrcode = new QRCode("qrcode");
  
//   makeCode();
} 

function draw() { 
//  background(255,0,0);
}

function makeCode() {      
    let url = "www.naver.com";
    
    qrcode.makeCode(url);
}


function keyPressed() {
  
  if(key == '0') {
    
    div.remove();
    
    div = createDiv("");
    div.id("qrcode");
    
    div.position(0,0);
  
  	qrcode = new QRCode("qrcode");
  }
  else if (key == '2') {
    makeCode();
  }
  else if (key == '3') {
    saveCanvas('myCanvas', 'jpg');
  }
}

Comments

[Lhankor_Mhy]

saveCanvas には何が入っていますか？

[kikpond15]

申し訳ありません，javaScriptについて知識が疎いもので内部的な処理については以下のgithubページの1488行からのようになっております．
https://github.com/processing/p5.js/blob/main/src/io/files.js

質問の意図が違いましたら申し訳ございません．
よろしくお願いします．

Answer 1

周りの知人に知恵を借りなんとか解決？やりたいことはできるようになりました．
どうやらQR生成ができていない段階で保存処理をやってしまっていたのが原因でした．

以下，解決したコードの一部を記載します．

    if (inputURL != null) {
        qrDiv.makeCode(inputURL.value());
        const qrCodeContainer = document.getElementById('qrcode');
        new QRCode(qrCodeContainer, inputURL.value());
        const onGeneratedQrImage = function() {
            const qrCodeImage = qrCodeContainer.children[1];
            const base64 = qrCodeImage.getAttribute('src');
            if (base64 === null) {
                setTimeout(onGeneratedQrImage, 100);
            } else {
                console.log(qrCodeImage);
                console.log(base64);
                qrImage = loadImage(base64);
            }
        };
        setTimeout(onGeneratedQrImage, 100);
    }

作りたかったイメージ生成のプログラムも完成したので下に載せておきます．
https://github.com/kikpond15/code2frame