canvasの描画結果を画像に変換したい

ローカルの画像に特定の画像を重ねるページを作っています。
canvasを描画結果を画像に変換したいのですが、 toDataURL()をどのように用いれば良いでしょうか？

超初心者で恐縮ですが、よろしくお願いいたします。

html
1<div class="upload"><input type="file" name="file" id="file"></div>
2<canvas id="canvas"></canvas>

javascript
1  var file = document.getElementById('file');
2  var canvas = document.getElementById('canvas');
3  var canvasWidth = 400;
4  var canvasHeight = 400;
5  var uploadImgSrc;
6
7// Canvas
8  canvas.width = canvasWidth;
9  canvas.height = canvasHeight;
10  var ctx = canvas.getContext('2d');
11  var img = new Image();
12  img.src = 'https://pigg.tokyo/images/test.png';
13  img.onload = function() {
14  ctx.drawImage(img, 0, 0);
15}
16
17
18function loadLocalImage(e) {
19    var fileData = e.target.files[0];
20    if(!fileData.type.match('image.*')) {
21    alert('画像を選択してください');
22    return;
23  }
24
25  var reader = new FileReader();
26    reader.onload = function() {
27    uploadImgSrc = reader.result;
28    canvasDraw();
29  }
30
31  reader.readAsDataURL(fileData);
32}
33
34　file.addEventListener('change', loadLocalImage, false);
35
36        
37// 画像を表示
38function canvasDraw(imgSrc) {
39    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
40    var img = new Image();
41    img.src = uploadImgSrc;
42    img.onload = function() {
43    ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));
44    addImage();
45    preview();
46  }
47}
48        
49// 画像を重ねる
50function addImage() {
51        ctx.drawImage(img, 0, 0);
52}

退会済みユーザー

2023/03/30 03:04

質問者さん、回答がでているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。

行動規範の内容に同意します

回答2件

ベストアンサー

参考にしてください。

js
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>Canvas to Image Example</title>
6  </head>
7  <body>
8    <canvas id="myCanvas" width="200" height="200"></canvas>
9    <button onclick="saveImage()">Save Image</button>
10
11    <script>
12      const canvas = document.getElementById("myCanvas");
13      const context = canvas.getContext("2d");
14
15      context.fillStyle = "#FF0000";
16      context.fillRect(0, 0, 200, 200);
17
18      function saveImage() {
19        const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
20        const link = document.createElement("a");
21        link.download = "canvas.png";
22        link.href = image;
23        document.body.appendChild(link);
24        link.click();
25        document.body.removeChild(link);
26      }
27    </script>
28  </body>
29</html>