HTML Canvas要素をダウンロードする方法 - toDataURL()

 何が起こったのですか。

この記事は、Chart.jsとの私の旅の別の章であり、新しい課題に直面しました。オンラインのチャート可視化を開発している最中に、ダウンロード機能の必要性に気付きました。これにより、その実装方法を探ることになりました。

この記事では、この課題に取り組む経験を共有し、Chart.jsとそのキャンバスベースのチャートを使用しながら、この見かけ上簡単なタスクをどのように乗り越えるかについて洞察を提供します。

toDataURL()

toDataURL()は、キャンバス要素に固有のユニークな機能です。これは、キャンバス要素の内容を表すDataURLオブジェクトを返します。

単純に言えば、これは画像形式と画像自体がBase64でエンコードされた文字列を生成します。

渡すことができる2つのオプションパラメータがあります: typeとencoderOptions。

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

type: 画像形式。デフォルトはimage/pngです。

encoderOptions: 画像の品質。0から1までの範囲で、値が高いほどクリアでファイルサイズが大きくなります。(*このパラメータは、jpegやwebpなどの損失圧縮形式の画像タイプにのみ影響を与えることに注意してください。)

取得したDataURLオブジェクトは、さまざまな目的で使用できます:

• ウェブページで表示: 画像またはiframe要素のソース(src)として直接使用できます。
• ダウンロード: DataURLをダウンロード可能なリンクとして提供し、ユーザーが画像をローカルに保存できます。

ダウンロード/参照された画像が黒く表示される理由は何ですか？

簡単な例を見てみましょう:

See the Pen canvas_download_1 by story zyra (@story-zyra) on CodePen.

⬆️ 自分で試してみることができます

なぜ黒く表示されるのでしょうか？実際には、この問題は画像ファイルの種類に関連しています！この問題はJPEG形式の場合にのみ発生します。

以下の例をご覧ください。表示にiframeを使用したダウンロードプロセスを変更しました。

See the Pen canvas_img_test by story zyra (@story-zyra) on CodePen.

明らかに、PNGとWebPファイルにはこの問題がありません。

調査の結果、JPEGは透明な背景をサポートしていないことがわかりました。これが、デフォルトの動作が黒に変換される理由かもしれません。

しかし、解決策は非常にシンプルです：自分で背景を描きます !!

    var ctx = canvas.getContext('2d');

    ctx.globalCompositeOperation = 'destination-over'
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

行 "ctx.globalCompositeOperation = 'destination-over'" は、新しく描かれた背景が既存のチャートの下に表示されるようにします。