canvasで画像を表示する
いきさつ
canvasを使って画像のリサイズをしたり、
画像のくり抜きがしたかったので、まずはcanvasで画像を表示できるようにした。
手順
1. input type='file'で画像を登録できるようにする
<input type="file" id='file'>
2. fileを登録した時にイベントが発火するようにする
/** input要素の取得 */ const input = document.getElementById('file'); /** inputに画像を追加した時にイベントを受け取る */ input.addEventListener('change', function(e) { /** 処理 */ }
3. 処理を書く
/** inputに画像を追加した時にイベントを受け取る */ input.addEventListener('change', function(e) { /** File オブジェクトを読み込む */ const file = e.currentTarget.files[0]; const fr = new FileReader(); fr.onload = function() { /** ファイルが読み込まれたあとの処理 */ const image = new Image(); /** 画像がimageタグに読み込まれた後の処理 */ image.onload = function() { ctx.beginPath() ; ctx.drawImage(this, 50, 0, 400, 400, 0, 0, 200, 200); } image.src = fr.result; } fr.readAsDataURL(file); });
解説1
canvasで画像を描く際、drawImageというメソッドを用います。
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
imageはHTMLImageElement, HTMLCanvasElement, HTMLVideoElement のいずれかを取ることができます。
ということは、まずはHTMLImageElemenetを生成する必要があります。
解説2
const image = new Image();
でHTMLImageElemenetが生成できます。が、
Imageのsrcを指定する必要があります。
const image = new Image(); /** 画像がimageタグに読み込まれた後の処理 */ image.onload = function() { ctx.beginPath() ; ctx.drawImage(this, 50, 0, 400, 400, 0, 0, 200, 200); } image.src = fr.result;
こんな感じで。
fr.resultはFileReaderがFileオブジェクトを読み込んだ際の結果です。