【初心者向け 107】Miniproject JS paint app2

Meme Maker

前回のアップを強化し、写真のアップロード機能と指定した文字をいれたり、ダウンロードできる機能を追加しました。

files, createObjectURL()

function onFilechange(event) {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  const image = new Image();
  image.src = url;
  image.addEventListener('load', () => {
    ctx.drawImage(image, 0, 0, 800, 800);
  });
  fileInput.value = null;
}

以前、event.target.files[0]を一回使ったことがありますが、もう一度使うことになり、fileはリストで受けることを思い出しました。

fileをconsole.logで確認した結果、このようにfileの情報が入るitemを見ることができることが分かりました。
URL APIでurlを抽出し、new Image()で<img>の要素を作り、URL APIから得たコードを入れる方法でした。

最終完成＆meme makerで作ったイメージを保存