canvas要素を使って、画像の上にテキストを描画。【HTML・JS(jQuery)】

JavaScript

2022.11.132022.11.16

ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。

HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。

デモ・解説
参考

デモ・解説

デモ

See the Pen canvas by masahiro nomura (@masahiroview) on CodePen.

テキストを描画した吹き出しは、普通に右クリックでダウンロード可能です。

JavaScript(jQuery)コード

const canvas = document.getElementById("preview");
const ctx = canvas.getContext('2d');

//初期吹き出しダウンロード
$(function() {
  loadFukidashiImage();
});

//①キャンバス要素に画像を描画
function loadFukidashiImage() {
  //画像を読み込む
  var image = new Image();
  image.src = 'https://tool-engineer.work/wp-content/uploads/2022/11/hukidashi-e1668301413980.png';
  //image()読み込み完了次第、canvasの高さ・幅・表示位置を指定する
  $(image).on("load",function(){
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  });
}


//②キャンバスに文字を描画
function drawFukidashiText() {
    const text = $("#text");
    ctx.font = '10px serif';
    ctx.fillStyle = '#000';
    ctx.textBaseline = 'center';
    ctx.textAlign = 'center';
    ctx.fillText(text.val(), 50, 50);
}