Canvas に複数の画像を指定した順序で描画し、その後 Canvas に描画された画像を Data Url 形式で取得する方法を書きます。元の話は Teratail のスレッド「CanvasにdrawImageで描写した画像をtoDataURLで取得したい」です。
上の画像がその結果を Chrome で表示したもので、左が Canvas の画像、右が canvas.toDataURL メソッドを使って Data Url 形式で取得した画像データを img 要素の src 属性に設定して表示した結果です。
Canvas に表示する複数の画像の数だけ new Image() で img 要素を生成し、その src 属性に画像の url を設定すると img 要素が画像に読み込みを完了した時点で load イベントが発生するので、それにリスナをアタッチして Canvas への書き込みと Data Url 取得の処理を行うのが基本です。
ただし、問題は、Canvas に描く画像が複数ある場合、img 要素による画像の読み込みにかかる時間が画像のサイズなどによって異なるので、複数ある img 要素の load イベント発生の順番は不定となることです。
もう一つ、canvas.toDataURL メソッドを使って Canvas から Data Url 形式のデータを取得するタイミングも問題です。全ての画像の Canvas への描画が終わるのを待たなければなりません。
上の問題に対応するには、最後の load イベントの発生を待って、そのイベントリスナで複数ある全ての img 要素の画像 を希望する順番に context.drawImage メソッドで Canvas に書き込むのがよさそうです。
context.drawImage は同期メソッドなので、同じリスナ内で、全ての画像の context.drawImage が終わった後に canvas.toDataURL メソッドを記述すれば Data Url 形式のデータを取得できます。（リスナの外に canvas.toDataURL メソッドを置くのはダメです。img 要素の load イベントが発生する前に canvas.toDataURL に制御が飛ぶので）
検証に使ったコード、即ち上の画像を表示したコードを以下に書いておきます。（ASP.NET のページを利用していますが、そこは本題とは関係ないので気にしないでください） 元の画像は 125px x 75px の色が異なる .png 画像 5 枚です。それらを 20px づつ右下にずらしながら描画しています。
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="0076Canvas2.aspx.cs" Inherits="_0076Canvas2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>0076Canvas2.aspx</title>
<script src="/Scripts/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
// それぞれ 125px x 75px の単色 png 画像
// 色は名前の通り赤, 青, 緑, 黄, 橙
var srcs = [
"/Images/red.png",
"/Images/blue.png",
"/Images/green.png",
"/Images/yellow.png",
"/Images/orange.png"
];
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
// canvas に描かれる順番を保証するには以下のようにする。
// そうすればリスナの中に canvas.toDataURL("image/png");
// を記述でき Data Url が取得できる
var images = [];
var loadCount = 0;
for (let i = 0; i < srcs.length; i++)
{
images[i] = new Image();
images[i].onload = function () {
loadCount++;
if (loadCount == images.length)
{
for (let j = 0; j < images.length; j++)
{
context.drawImage(images[j], j * 20, j * 20);
}
// image.onload のリスナの中でないと Data Url
// は取得できないので注意
var result = canvas.toDataURL("image/png");
document.getElementById("image1").src = result;
}
};
images[i].src = srcs[i];
}
}
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="float: right;">
<canvas id="mycanvas" width="205" height="155">
</canvas>
</div>
<div>
<img id="image1" alt="" />
</div>
</form>
</body>
</html>
他に jQuery.Deferred() を使う方法もあります。そのコードを以下に書いておきます。
// jQuery.Deferred を使用
var images = [];
var dfds = [];
for (let i = 0; i < srcs.length; i++)
{
images[i] = new Image();
let dfd = new $.Deferred();
dfds[i] = dfd;
images[i].onload = function () { dfd.resolve(); };
images[i].src = srcs[i];
}
$.when.apply($, dfds).done(function () {
for (let i = 0; i < images.length; i++)
{
context.drawImage(images[i], i * 20, i * 20);
}
var result = canvas.toDataURL("image/png");
document.getElementById("image1").src = result;
});
全ての img 要素の load イベントが発生し終わるのを待って Canvas への描画と Data Url 形式のデータを取得するというところは同じですが、見かけは何となくカッコいいかも。（笑）