BlobとCanvasがうまく作動しない(HTML,JavaScript)

前提・実現したいこと

JavaScriptのBlobを使ってHTMLのcanvasに描かれている絵をキャプチャーしてその画像をjpeg画像として保存できるようにしたいです。そのためのテストコードを書きましたが、うまく作動しません。

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

・下記のようなコードを書いたが、canvasに絵が描かれていない。(本来なら長方形の絵が描かれていてほしい)
・下記の「clickボタン」を押しても、ブラウザのダウンロード機能が作動しない。

使用ブラウザはChrome、OSはWindows 10です。

何がおかしいのでしょうか？
ご回答よろしくお願いします。

該当のソースコード

html
1<html>
2<head>
3  
4</head>
5<body>
6  <canvas id="imgArea" width="600" height="400"></canvas>
7  <button id = "myBtn" onclick = "haha()">click</button>
8  
9  
10</body>
11<script src = "test.js"></script>
12</html>

JavaScript
1const canvas = document.getElementById("imgArea");
2const ctx = canvas.getContext("2d");
3
4ctx.fillStyle = "#fff";
5ctx.fillRect(50, 50, 100, 100);
6
7const haha = () => {
8  const link = document.createElement("a");
9  canvas.toBlob(function(blob){
10    link.href = window.URL.createObjectURL(blob);
11  });
12  link.download = "myPic.jpeg";
13  link.click();
14}

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

回答2件

自己解決

const haha = () => {
  const link = document.createElement("a");
  canvas.toBlob(function(blob){
    link.href = window.URL.createObjectURL(blob);
  });
  link.download = "myPic.jpeg";
  link.click();
}

を

const haha = () => {
  const link = document.createElement("a");
  canvas.toBlob(function(blob){
    link.href = window.URL.createObjectURL(blob);
  link.download = "myPic.jpeg";
  link.click();
  });

}

と変えたところ、成功しました。

投稿2021/02/14 11:15

duolingo

総合スコア2

(本来なら長方形の絵が描かれていてほしい)

白だからでは。
ctx.fillStyle = "#fff";

・下記の「clickボタン」を押しても、ブラウザのダウンロード機能が作動しない。

動作イメージが分からないのですけど、
createElement()で作った要素はどこにも配置されてないのでクリックもできないかと思います。

投稿2021/02/14 08:39

m.ts10806

総合スコア80861

duolingo

2021/02/14 10:27

ご回答ありがとうございます。 >動作イメージが分からないのですけど、 HTMLのページ上にある「click」と書かれたボタンを押すと、上記の関数「haha」が発火し、canvas上の絵を画像ファイルとしてダウンロード保存できるようにしたいと思っています。 createElementで作ったaタグは、それをclickするとcanvasの中身が入ったblobオブジェクトにアクセスできるようにするための足場のようなものです。 >createElement()で作った要素はどこにも配置されてないのでクリックもできないかと思います。 HTML上には配置されませんが、JavaScript上でclickメソッドを使うとクリックをシミュレートできるそうです。 https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

duolingo

2021/02/14 10:29

長方形の描画に関しては、ご指摘を受けて色のパラメーターを変えたところ、無事描かれました。(ありがとうございます)

m.ts10806

2021/02/14 10:30

>HTML上には配置されませんが、JavaScript上でclickメソッドを使うとクリックをシミュレートできるそうです。どこに書いてありますか？サンプルコードも含めて、HTML上に配置されている要素への対応に見えます。

duolingo

2021/02/14 10:41

確かに、サンプルコードは既にHTML上に配置されていますね。 >HTMLElement.click() メソッドは、要素のマウスクリックをシミュレートします。サポートしている要素（<input> など）で click() を使用すると、要素の click イベントが発生します。このイベントは、ドキュメントツリー (またはイベントチェーン) の上位の要素にバブルアップし、click イベントを発生させます。とあり、https://developer.mozilla.org/ja/docs/Web/API/Document/createElement によると、 >document.createElement() メソッドは tagName で指定された HTML 要素を生成し、とあったので、createElementで生成したHTML要素はclickメソッドでクリックイベントを発生させられると思ったのですが、勘違いでしょうか？

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

あなたの回答