javascriptのcanvasで画像を合成してダウンロードする方法

前提・実現したいこと

現在htmlとjavascriptのcanvasを用いてユーザーがアップした画像の上に画像をのせて合成した画像をダウンロードできるようにするプログラムを作っています。
その際に画像をアップして他の画像を重ねるところまでは成功したのですが、最後にダウンロードする際にダウンロード画像が合成した画像ではなく、アップロードした画像と同じものになってしまいました。
合成した画像をダウンロードさせる方法を教えて下さい。よろしくお願いします。

該当のソースコード

html
1<h1>タイトル</h1>
2  <div class="upload"><input type="file" name="file" id="file"></div>
3  <canvas id="canvas"></canvas>
4  <div id="result"></div>
5

javascript
1var file = document.getElementById('file');
2    var canvas = document.getElementById('canvas');
3    var canvasWidth = 400;
4    var canvasHeight = 300;
5    var uploadImgSrc;
6
7    // Canvasの準備
8    canvas.width = canvasWidth;
9    canvas.height = canvasHeight;
10    var ctx = canvas.getContext('2d');
11
12    function loadLocalImage(e) {
13      // ファイル情報を取得
14      var fileData = e.target.files[0];
15
16      // 画像ファイル以外は処理を止める
17      if (!fileData.type.match('image.*')) {
18        alert('画像を選択してください');
19        return;
20      }
21
22      // FileReaderオブジェクトを使ってファイル読み込み
23      var reader = new FileReader();
24      // ファイル読み込みに成功したときの処理
25      reader.onload = function () {
26        // Canvas上に表示する
27        uploadImgSrc = reader.result;
28        canvasDraw();
29      }
30      // ファイル読み込みを実行
31      reader.readAsDataURL(fileData);
32    }
33
34    // ファイルが指定された時にloadLocalImage()を実行
35    file.addEventListener('change', loadLocalImage, false);
36
37    // Canvas上に画像を表示する
38    function canvasDraw() {
39      // canvas内の要素をクリアする
40      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
41### ヘディングのテキスト
42      var base = new Image();
43      base.src = 'example.png';
44      base.onload = function () {
45        ctx.drawImage(base, 100, 100, 200, 30);
46      }
47      // Canvas上に画像を表示
48      var img = new Image();
49      img.src = uploadImgSrc;
50      img.onload = function () {
51        ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));
52       
53        //ダウンロードデータ化
54         var data = canvas.toDataURL();
55         // ダウンロードリンクを生成して出力
56        var dlLink = document.createElement('a');
57         dlLink.href = data;
58         dlLink.download = 'sample.png';
59         dlLink.innerText = 'ダウンロード';
60        document.getElementById('result').appendChild(dlLink);
61      }
62      
63
64    }

試したこと

canvasをデータURL化する部分の位置を変えたり、遅れて実行させたりしましたが、その際には真っ白な画像がダウンロードされたり、エラーが出てダウンロードリンクが描画されなかったりしました。

yambejp

2021/09/06 11:42 編集

仕様がいまいちわかりませんtype=fileが１つだけあって、ファイルを選択するたびどんどん上に重ねていくのでしょうか？保存ボタンかなにかをおすと合成画像を保存する？

dragon_bi

2021/09/06 13:40

返信ありがとうございます。説明不足で申し訳ございません。仕様としましてはアップロードした画像にこちらが予め用意した画像を上にのせて合成するものです。ファイルを選択するとその画像の上にこちらが用意した画像が乗ります。その後もう一度別の画像を選択し直した際には前に選択した画像はクリアされ、今度はその画像の上にこちらが用意した画像が乗ります。ですので保存ボタンなどはなく、画像がどんどん重なるわけではありません。よろしくお願いします。