canvasのtoDataURLが想定している内容を返さない

Question

###前提・実現したいこと
electronでローカルファイルを複数のcanvasに分けて表示し、あとからcanvasを結合してpng形式でダウンロードする処理を書いています

###発生している問題・エラーメッセージ
結合後のcanvasのtoDataURL()でブランクの画像データが取得され、canvasの内容が取得できない（canvasは正常に表示できています）

###該当のソースコード

        let imgBase = new Image();
        let imgMoment = new Image();
        if(document.getElementById('base').checked === true){
            imgBase.src = document.getElementById(cvsId + 'base').toDataURL();
        }
        let radio = document.querySelectorAll("input[type='radio']");
        for(let i = 0; i < radio.length; i++){
            if(radio[i].checked === true){
                imgMoment.src = document.getElementById(cvsId + radio[i].id).toDataURL();
            }
        }
        let output = document.createElement('canvas');
        let cntOut = output.getContext('2d');
        output.width = document.getElementById(cvsId + 'base').width;
        output.height = document.getElementById(cvsId + 'base').height;
        imgBase.onload = () => {
            if(imgBase !== null){
                cntOut.drawImage(imgBase, 0, 0, output.width, output.height);
            }
        }
        imgMoment.onload = () => {
            if(imgMoment !== null){
                cntOut.drawImage(imgMoment, 0, 0, output.width, output.height);
            }
        }
        document.getElementById('main').appendChild(output)
        let aLink = document.createElement('a');
        aLink.href = output.toDataURL();
        aLink.download = 'output.png';
        aLink.innerHTML = 'test';
        document.getElementById('main').appendChild(aLink);
        aLink.dispatchEvent(new CustomEvent('click'));

###試したこと
上記の通りcanvasは表示できていることを確認済み
コンソールから直接結合後のcanvasのtoDataURL()を取得すると想定している画像が取得できる

こちらで質問するのは初めてですので至らない点等あるかと思いますが、皆様のお力をお借りしたく思います
よろしくお願いします

Answer 1

主な問題点は次の3つです.
0. Image.srcに画像への参照URLを設定したあとでImage.onloadを設定している.
Image(HTMLImageElement)オブジェクトによる画像読み込みはスクリプトの背後で同時並行的に行われます. そのため, Image.srcプロパティにURLを設定した後, Image.onloadにリスナ関数を登録する前に画像の読み込みが完了してしまうと, リスナ関数を呼び出すことが出来ません.

1. toDataURLメソッドの呼び出しがImage.onloadリスナ関数内部で行われていない.

Image.onloadリスナ関数の呼び出しは非同期的に行われるため, リスナ関数の登録直後にtoDataURLメソッドを呼び出すことは, リスナ関数の実行前に呼び出すことと同義です. 結果リスナ関数内部で行っている画像描画処理がスキップされているように見えるのです.

1. そもそもdrawImageメソッドは引数としてHTMLCanvasElementを利用できる.

ご提示のコードではcanvas要素に描いたグラフィックをわざわざtoDataURLでデータURIスキーム化し, Imageオブジェクトに設定してからdrawImageメソッドでcanvas要素に描こうとしていますが, canvas要素には別のcanvas要素(HTMLCanvasElementオブジェクト)を引数として利用できます. (canvas要素には別のcanvas要素を直接描ける)

上記1,2に関しては, canvas要素にImageオブジェクトの内容を描く場合の慣例句を憶えておくべきです.

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
//まずはじめにリスナ関数を登録する
image.onload = e => {
    ctx.drawImage(image, 0, 0);
    //画像描き込み後の処理は以下に書く
    const url = canvas.toDataURL();
};
//リスナ関数の登録が終わったのでsrcを設定する
image.src = "some url";

一方3を念頭に入れると, 上記1,2で発生している画像読み込みに伴う非同期処理にまつわる問題は全て回避できます.

---

以上を踏まえてコードを修正した場合, 次のようになります. ここでは問題を引き起こしている非同期処理を全て同期処理に置き換えています.

let imgBase = null;
let imgMoment = null;
if(document.getElementById('base').checked === true){
    imgBase = document.getElementById(cvsId + 'base');//canvas要素
}
let radio = document.querySelectorAll("input[type='radio']");
for(let i = 0; i < radio.length; i++){
    if(radio[i].checked === true){
        imgMoment = document.getElementById(cvsId + radio[i].id);//canvas要素
    }
}
let output = document.createElement('canvas');
let cntOut = output.getContext('2d');
output.width = document.getElementById(cvsId + 'base').width;
output.height = document.getElementById(cvsId + 'base').height;
if(imgBase !== null){
    cntOut.drawImage(imgBase, 0, 0, output.width, output.height);//canvas要素
}
if(imgMoment !== null){
    cntOut.drawImage(imgMoment, 0, 0, output.width, output.height);//canvas要素
}
document.getElementById('main').appendChild(output)
let aLink = document.createElement('a');
aLink.href = output.toDataURL();
aLink.download = 'output.png';
aLink.innerHTML = 'test';
document.getElementById('main').appendChild(aLink);
aLink.dispatchEvent(new CustomEvent('click'));

Comments

[violet_ncnc]

丁寧に解説していただきありがとうございます。
canvasにはcanvasを直接指定できるのですね。大変勉強になりました。
おかげさまでやりたかった処理が実現できそうです。
ありがとうございました。