画像をCanvas上に表示して、ボタンを押すごとに右に90度回転させたい

前提・実現したいこと

File APIでアップロードした画像をCanvas上に表示して、その後、回転ボタンを押すごとに右に90度回転させたいです。
canvas 自体ではなくcanvasに描画した画像のみを回転させたいです。
わかる方がいらっしゃいましたら、ご教示お願い申し上げます。

該当のソースコード

<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div class="upload"><input type="file" name="file" id="file"></div> <canvas id="canvas"></canvas> <input type="button" id="rotate" value="回転"/> </body> <script> var file = document.getElementById('file'); var canvas = document.getElementById('canvas'); var canvasWidth = 400; var canvasHeight = 300; var uploadImgSrc; // Canvasの準備 canvas.width = canvasWidth; canvas.height = canvasHeight; var ctx = canvas.getContext('2d'); function loadLocalImage(e) { // ファイル情報を取得 var fileData = e.target.files[0]; // 画像ファイル以外は処理を止める if(!fileData.type.match('image.*')) { alert('画像を選択してください'); return; } // FileReaderオブジェクトを使ってファイル読み込み var reader = new FileReader(); // ファイル読み込みに成功したときの処理 reader.onload = function() { // Canvas上に表示する uploadImgSrc = reader.result; canvasDraw(); } // ファイル読み込みを実行 reader.readAsDataURL(fileData); } // ファイルが指定された時にloadLocalImage()を実行 file.addEventListener('change', loadLocalImage, false); // Canvas上に画像を表示する function canvasDraw() { // canvas内の要素をクリアする ctx.clearRect(0, 0, canvasWidth, canvasHeight); // Canvas上に画像を表示 var img = new Image(); img.src = uploadImgSrc; img.onload = function() { ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width)); } } </script> </html>

参考したURL

https://www.tam-tam.co.jp/tipsnote/javascript/post13538.html

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

回答1件

ベストアンサー

context.translate, context.rotate, context.drawImageを活用して回転させます。

index.html

html
1<div>
2  <input type="file" accept="image/*" id="file-field">
3</div>
4
5<div>
6  <canvas id="canvas" width="400" height="300"></canvas>
7
8  <button id="rotate-button" data-angle="0">
9    Rotate
10  </button>
11</div>
12
13<script src="./script.js"></script>

script.js

javascript
1window.addEventListener("DOMContentLoaded", (event) => {
2  const image = new Image();
3
4  const fileField = document.querySelector("#file-field");
5  const canvas = document.querySelector("#canvas");
6  const rotateButton = document.querySelector("#rotate-button");
7
8  const context = canvas.getContext("2d");
9
10  image.addEventListener("load", (event) => {
11    renderImage(0);
12
13    rotateButton.dataset.angle = 0;
14  });
15
16  fileField.addEventListener("change", (event) => {
17    const file = fileField.files[0];
18
19    if (!file.type.includes("image")) {
20      return alert("Invalid file type.");
21    }
22
23    image.src = URL.createObjectURL(file);
24  });
25
26  rotateButton.addEventListener("click", (event) => {
27    const angle = Number.parseInt(rotateButton.dataset.angle) + 90;
28
29    renderImage(angle);
30
31    rotateButton.dataset.angle = angle;
32  });
33
34  function renderImage(angle) {
35    const imageWidth = canvas.width;
36    const imageHeight = image.height * (canvas.width / image.width);
37
38    context.save();
39    context.clearRect(0, 0, canvas.width, canvas.height);
40    context.translate(imageWidth / 2, imageHeight / 2);
41    context.rotate(angle * (Math.PI / 180));
42    context.drawImage(image, -1 * (imageWidth / 2), -1 * (imageHeight / 2), imageWidth, imageHeight);
43    context.restore();
44  }
45});

解説

context.rotateを使用すると、canvasの原点(0, 0)を中心にして、canvas全体が回転してしまいます。サンプル
しかし、canvasの原点ではなく画像の中心を軸に回転させたいので、context.rotateの前に、まずcontext.translateを使用してcanvasの原点を画像の中心座標に移動させます。サンプル
canvasの原点を画像の中心座標に移動させた状態で、canvas全体を回転させます。サンプル
drawImageを呼び出す際に、画像の中心が回転の中心となるようにパラメータを変更します。サンプル

投稿2020/09/11 05:53