常連

### 実現したいこと

作成中の画像リサイズアプリにて、アップロードされた時のものと同じ拡張子で処理後の画像を取得すること

### 前提

現在、HTML・JavaScriptを使って画像リサイズツールを作成しています。

そのうちアップロードされた画像のサイズを変更する処理そのものは問題なく実行できているのですが、canvasから処理後の画像を取得しダウンロードリンクを生成する際に正しい拡張子を適用することができず困っています。

もし原因・解決方法をご存知でしたら、ご教示いただけますと幸いです。

### 発生している問題・エラーメッセージ

本来は投稿された画像ファイルの拡張子を変数extに保存し出力ファイル名「newFileName」にもそのまま適用させたいと考えているのですが、なぜか出力される画像の拡張子が毎回pngになってしまいます。

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

```JavaScript
let originalWidth = 0;
let originalHeight = 0;
let aspectRatio = 1;

function loadImage() {
    // 投稿された画像
    let fileInput = document.getElementById('imageInput').files[0];
    if (!fileInput) return;

    let reader = new FileReader();
    reader.readAsDataURL(fileInput);

    reader.onload = function(event) {
        let img = new Image();
        img.src = event.target.result;

        img.onload = function() {
            originalWidth = img.width;
            originalHeight = img.height;
            aspectRatio = originalWidth / originalHeight;

            // 幅・高さの入力フィールドに投稿された画像の元のサイズを自動挿入
            document.getElementById('widthInput').value = originalWidth;
            document.getElementById('heightInput').value = originalHeight;

            // サイズ変更方法のSelect要素を表示
            document.getElementById('resizeType').style.visibility = "visible";
            document.getElementById('resizeLabel').style.visibility = "visible";
        };
    };
}

function updateInputFields() {
    let resizeType = document.getElementById('resizeType').value;
    let dimensionInputs = document.getElementById('dimensionInputs');
    let percentageInput = document.getElementById('percentageInput');

    // 選択されたサイズ変更方法に応じて入力フィールドの表示状態を変更
    if (resizeType === "aspect") {
        dimensionInputs.style.display = "block";
        percentageInput.style.display = "none";
        document.getElementById('widthInput').disabled = false;
        document.getElementById('heightInput').disabled = false;
    } else if (resizeType === "percentage") {
        percentageInput.style.display = "block";
        dimensionInputs.style.display = "none";
    } else if (resizeType === "custom") {
        dimensionInputs.style.display = "block";
        percentageInput.style.display = "none";
        document.getElementById('widthInput').disabled = false;
        document.getElementById('heightInput').disabled = false;
    } else {
        dimensionInputs.style.display = "none";
        percentageInput.style.display = "none";
    }
}

// 縦横比維持の場合、幅・高さを自動調整
function updateHeightAspect() {
    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput');
    let heightInput = document.getElementById('heightInput');

    if (resizeType === "aspect" && widthInput.value) {
        heightInput.value = Math.round(widthInput.value / aspectRatio);
    }
}

function updateWidthAspect() {
    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput');
    let heightInput = document.getElementById('heightInput');

    if (resizeType === "aspect" && heightInput.value) {
        widthInput.value = Math.round(heightInput.value * aspectRatio);
    }
}

function resizeImage() {
    let fileInput = document.getElementById('imageInput').files[0];
    if (!fileInput) {
        alert("画像を正しくアップロードしてください。");
        return;
    }

    let resizeType = document.getElementById('resizeType').value;
    let widthInput = document.getElementById('widthInput').value;
    let heightInput = document.getElementById('heightInput').value;
    let percentage = document.getElementById('percentage').value;

    let reader = new FileReader();
    reader.readAsDataURL(fileInput);
    
    reader.onload = function(event) {
        let img = new Image();
        img.src = event.target.result;

        img.onload = function() {
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');

            let newWidth, newHeight;

            if (resizeType === "aspect") {
                newWidth = parseInt(widthInput);
                newHeight = parseInt(heightInput);
            } else if (resizeType === "percentage") {
                if (!percentage) {
                    alert("有効な数値を入力してください。");
                    return;
                }
                let scale = percentage / 100;
                newWidth = Math.round(originalWidth * scale);
                newHeight = Math.round(originalHeight * scale);
            } else if (resizeType === "custom") {
                newWidth = parseInt(widthInput);
                newHeight = parseInt(heightInput);
            }

            canvas.width = newWidth;
            canvas.height = newHeight;
            ctx.drawImage(img, 0, 0, newWidth, newHeight);

            // ダウンロードリンクの設定
            let downloadLink = document.getElementById('downloadLink');
            let originalName = fileInput.name;
            const pos = originalName.lastIndexOf('.');
            let baseName = originalName.substring(0, pos) || originalName;
            let ext = originalName.slice(pos + 1)
            let newFileName = baseName + '-resized.' + ext;
            // 下記「試したこと」にて説明
            console.log(ext);
            console.log(originalName);
            downloadLink.download = newFileName;
            let dataUrl = '';
            // 元の拡張子によって取得する画像のフォーマットを変更
            if(ext == 'png' || ext == 'PNG') {
                dataUrl = canvas.toDataURL("image/png");
            } else if(ext == 'jpg' || ext == 'JPG') {
                    dataUrl = canvas.toDataURL("image/jpg");
            } else if(ext == 'gif' || ext == 'GIF') {
                    dataUrl = canvas.toDataURL("image/gif");
            } else {
                    dataUrl = canvas.toDataURL();
            }
            downloadLink.href = dataUrl;
            downloadLink.style.display = "block";
        };
    };
}
```

### 試したこと

ext(元のファイルの拡張子)が正しく取得できていないのかと考え、上記の通り途中でextの内容をコンソールに出力させてみました。  
ただこの時の出力結果は例えば「jpg」のように正しく出力されているのにも関わらず、やはりダウンロードされる画像は「example.jpg.png」というようにPNG形式に変更されてしまうため、未だ状況が把握できていない状況です。


以上です。
よろしくお願いいたします。


JavaScriptでcanvasの画像を取得する際に拡張子が正しく適用できない

###概要
GUIプログラム関係で困っていることが有ります。助けてください。
画面の拡大と同時に伸縮率に合わせてテキストボックスとスクロールバーの大きさを変更したいです。
誰かご教授頂けませんか。

tkinterを利用して以下のコードを作りました。
```Python
import tkinter as tk

root = tk.Tk()
root.geometry("300x300")

canvas = tk.Canvas(root)
canvas.pack()

scrollbar = tk.Scrollbar(canvas)
scrollbar.pack(side=tk.RIGHT,fill="y")
text = tk.Text(canvas,width=10,height=10)
text.pack(side=tk.LEFT)
text["yscrollcommand"] = scrollbar.set

root.mainloop()
```

tkinter画面の伸縮と同時にTextboxの大きさを変更したい

HTMLのフォームにファイルアップロード機能がありますが、canvasで描いたものを`form`の他の要素と一緒にPOSTで送信することはできないでしょうか。

調べてみると、「他の要素とは別にAjaxで送信する」「Data URIやBase64に変換してアップロードする」というような手法はあったのですが、できることならサーバ側に手を入れず、通常の`<input type="file" />`を受け取るのと同様に処理できればいいなと考えています。

Canvasの中身を、formとしてPOSTしたい

### 前提
**参考元**
[Moon Night Meteor Canvas Animation](https://www.youtube.com/watch?v=1pz-r5UzMu8&list=PL9uxHAkvBwk3nj7IZVVmxMuskRSIXNJ-B&index=16)

上記リンク先はCanvasを用いたアニメーション作成動画で、HTMLとJavaScriptを使用して、月と煌めく星と流れ星のアニメーションが表示されます。
動画ではDOMContentLoadedで制御されていますが、これをkeydownが発生すると流れ星のアニメーションが開始されるようなコードを構築しようとしています。（流れ星以外のアニメーションはページロード時に表示）
### 実現したいこと・要点
- キーボード押下一回につき、表示される流れ星は一つ。２回３回押せば２個３個表示される。
- 流れ星のアニメーションは、画面外上部から始まり、画面外下部へ消えて終了がワンループ。
- 生成された流れ星のスピードは、画面外へ消えるまで常に一定（生成時に決められたスピードの値が変化しないということ）
- 流れ星の発生位置、スピードともにランダム。

### 発生している問題・エラーメッセージ
- 連続したキーダウンに対応できていない。連続すると（恐らく）配列に次々と追加され、動作が重くなる。
- 流れ星のアニメーションが途中で終了してしまう。これにより、次のアニメーション開始位置が途中で終了した地点からとなり、望む動作になっていない。
### 該当のソースコード
```HTML,JavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Moon.css">
  </head>
  <body>
    <canvas id="canvas"></canvas>
    
    <script>
      let canvas, ctx, w, h, moon, meteor;
      let count = 0;
      let stars = [];
      let meteors = [];

      function init() {
        canvas = document.querySelector("#canvas");
        ctx = canvas.getContext("2d");
        resizeReset();
        moon = new Moon();
        for (let a = 0; a < w * h * 0.0001; a++) {
          stars.push(new Star());
        }
        // for (let b = 0; b < 7; b++) {
        //   meteors.push(new Meteor());
        // }
        StarAnimationLoop();
      }

      const countUp = () => {
        if (count < 80) {
          count++;
          console.log(count);
          drawMeteorScene();
          requestAnimationFrame(countUp);
        }
      }

      function keydown() {
        count = 0;
        meteor = new Meteor();
        meteors.push(meteor);
        countUp();
        // MeteorAnimationLoop();
        // if (meteor.y >= h + 50) {
        //   cancelAnimationFrame(MeteorAnimationLoop);
        // }
      }

      function resizeReset() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
      }

      function StarAnimationLoop() {
        ctx.clearRect(0, 0, w, h);
        drawStarScene();
        requestAnimationFrame(StarAnimationLoop);
      }

      function MeteorAnimationLoop() {
        drawMeteorScene();
        // requestAnimationFrame(MeteorAnimationLoop);
      }

      function drawStarScene() {
        moon.draw();
        stars.map((star) => {
          star.update();
          star.draw();
        })
      }

      function drawMeteorScene() {
        meteors.map((meteor) => {
          meteor.update();
          meteor.draw();
        })
      }

      class Moon {
        constructor() {
          this.x = 150;
          this.y = 150;
          this.size = 100;
        }
        draw() {
          ctx.save();
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.shadowColor = "rgba(254, 247, 144, .5)";
          ctx.shadowBlur = 50;
          ctx.fillStyle = "rgba(254,247,144, 1)";
          ctx.fill();
          ctx.closePath();
          ctx.restore();
        }
      }

      class Star {
        constructor() {
          this.x = Math.random() * w;
          this.y = Math.random() * h;
          this.size = Math.random() + 0.5;
          this.blinkChance = 0.05;
          this.alpha = 1;
          this.alphaChange = 0;
        }
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
          ctx.fill();
          ctx.closePath();
        }
        update(){
           if (this.alphaChange === 0 && Math.random() < this.blinkChance) {
            this.alphaChange = -1;
           } else if (this.alphaChange !== 0) {
            this.alpha += this.alphaChange * 0.5;
            if (this.alpha <= 0) {
              this.alphaChange = 1;
            } else if (this.alpha >= 1) {
              this.alphaChange = 0;
            }
           }
        }
      }

      class Meteor {
        constructor() {
          this.reset();
        }
        reset() {
          this.x = Math.random() * w;
          this.y = -100;
          this.size = Math.random() * 2 + 0.5;
          this.speed = (Math.random() + 1) * 5;
        }
        draw() {
          ctx.save();
          ctx.strokeStyle = "rgba(255, 255, 255, .1)";
          ctx.lineCap = "round";
          ctx.shadowColor = "rgba(255, 255, 255, 1)";
          ctx.shadowBlur = 10;
          for (let i = 0; i < 10; i++) {
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineWidth = this.seze;
            ctx.lineTo(this.x + 10 * (i + 1), this.y - 10 * (i + 1));
            ctx.stroke();
            ctx.closePath();
          }
          ctx.restore();
        }
        update() {
          this.x -= this.speed;
          this.y += this.speed;
          if ( this.y >= h + 50) {
            this.reset();
          }
        }
      }

      window.addEventListener("DOMContentLoaded", init);
      window.addEventListener("keydown", keydown);
      window.addEventListener("resize", resizeReset);
    </script>
  </body>
</html>
```
```css
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: linear-gradient(0deg,rgba(13,35,93,1) 0%,rgba(0,5,8,1) 70%);/*グラディエーションの角度と色 */
}

#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
```
### 試したこと
- keydown 関数内で countUp 関数を使用してキーダウンによるアニメーションの制御を試みましたが、連続したキーダウンに対応できず、アニメーションが重くなる問題が発生しています。
- 流れ星のアニメーション終了後の制御に関して、MeteorAnimationLoop などを試しましたが、適切なアプローチが見つかっていません。
### 補足情報
- 現在のコードは、ページロード時には月と煌めく星が表示され、キーダウンイベントが発生すると流れ星のアニメーションが開始されるが、問題点が発生しています。
- 連続したキーダウンに対応し、流れ星のアニメーションを滑らかに制御できるような方法を模索しています。
- 流れ星のアニメーションが途中で終了してしまい、次のアニメーション開始位置が望ましくないため、改善策を探しています。


JavaScriptで流れ星のアニメーションを適切に制御する。

現在プライベートでhtml5のCanvasを勉強しています。

そこで困っていることがあります。

結論から言うと、

複数のCanvasを結合し、１つの画像として保存するにはどうしたらいいでしょうか？

Canvasで描いた図形を画像に変換し、保存することはできました。

しかし、複数のCanvasタグを並べ、そこに描いた図形を結合し、それを1枚の画像として保存したいのです。

もしわかる方がいればよろしくお願いします。

複数のCanvasを結合し、1つの画像として保存したい

### やりたいこと

MVVM下で、WPF & C# を使って、Canvas コントロールの子要素を動的に増減させたいです。
[こちら](https://social.msdn.microsoft.com/Forums/ja-JP/8b2463e4-5679-4fc4-a691-360c288deaea/12304mvvm12305wpf12398canvas12467125311248812525125401252312398childre?forum=csharpgeneralja)にある質問と同様の質問になりますが、子要素は (そちらの質問がやっているような) Rectangle だけでなく、Canvas の子要素にすることができる全てのコントロールを対象として増減させたいです。

### 質問
このようなことが可能であれば、やり方を教えてください。
ViewModel にバインドする方法で出来なければ、Canvas.Children.Add でやりますので、可能でない場合は、可能でない、と教えていただけるだけで大丈夫です。

### 自分のレベル
C, C++, JavaScript は10年ほど
C# は3ヵ月ほど
.NET Core 3.1 & WPFは、1日経った程度です。
よって、C#は大体分かりますが、WPFはまだあまりよく分かっていません。
最低限、[MSDocsのWPF入門](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/windows/?view=netdesktop-5.0)は一通り見ており、基礎的なウィンドウ程度は作れます。
Binding, DataContext を使った View-ViewModel 間のデータバインドの方法も、単純なものなら理解しています。

Canvasコントロールの子要素を動的に増減させたい

現在chart.jsにてドーナツ型グラフを作成しています。  

[実装したものはこちらです](https://jsfiddle.net/xtL9fo25/3/)

[chart.jsのドキュメント](http://www.chartjs.org/docs/latest/)

現在、以下のようなコードを書いて、
ドーナツグラフを表示しております。 

今回やりたいことは、
ドーナツグラフの真ん中の穴の中央にタイトルを入れたいです。
例えば「制作実績円グラフ」のようなテキストを入れることは可能なのでしょうか。
できれば 制作実績<br>円グラフ のような改行を入れることも可能でしょうか。

わかるかたがいましたら教えていだだけないでしょうか。
よろしくお願いいたします。


```html
<div class="chart_price">
   <canvas id="chartPrice" width="300" height="300"></canvas>
</div>
```

```javascript

          //ドーナツグラフ
          var ctx = document.getElementById("chartPrice");
          var myPieChart = new Chart(ctx, {
            //グラフの種類
            type: 'doughnut',
            //データの設定
            data: {
                //データ項目のラベル
                labels: ["30万円以下", "30万～50万", "60万～90万", "100万～200万", "200万円以上"],
                //データセット
                datasets: [{
                    //背景色
                    backgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //背景色(ホバーしたとき)
                    hoverBackgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //グラフのデータ
                    data: [314, 80, 108, 79, 10]
                }]
            }
          });

```

chart.jsでドーナツ型グラフの中央にタイトルを載せたい

### 実現したいこと


- [ ] 画面の画像上に透明な図形を表示できる

### 前提

Angularで実装しているアプリ内で画像の上に透明な図形を配置し、
イベント監視で着色したりできる描画処理ライブラリを探しています。

Reactであれば、image mapperのようなライブラリです。

### 補足情報

```
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.10
@angular-devkit/build-angular   19.2.10
@angular-devkit/core            19.2.10
@angular-devkit/schematics      19.2.10
@angular/cli                    19.2.10
@angular/ssr                    19.2.10
@schematics/angular             19.2.10
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0
```
