Я пытаюсь повернуть изображение внутри HTML canvas. Поворот работает, но при каждом повороте углы изображения обрезаются / обрезаются. Это неправильно, потому что после загрузки все загруженное изображение должно быть целым.
Некоторые важные детали:
- В моем конкретном случае использования у меня нет доступа к самим данным изображения. Таким образом, загруженное пользователем изображение будет обработано и нарисовано на холсте HTML. Я могу получить доступ только к элементу холста HTML, но не к самому загруженному изображению. Так работает система.
- Ширина и высота холста должны быть точно такими же, как ширина и высота загружаемого изображения
- Сам холст должен сохранять свои размеры и не должен поворачиваться, должен вращаться только изображение в нем.
- Без CSS, его следует архивировать только с помощью JavaScript, поскольку повернутое изображение холста будет загружено на сервер.
Итак, проблема в том, что каждый раз, когда я хочу повернуть изображение на 45 градусов, углы изображения внутри HTML-холста обрезаются / обрезаются. Очевидно, что это не правильно, поскольку все изображение должно быть повернуто. Я не могу понять, что я сделал неправильно, так что, может быть, кто-то может помочь мне дальше?
https://jsfiddle.net/d5zurxq2/
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas" width=250 height=250></canvas>
<br /><br /><br />
<button type="button" id="rotateLeft">Rotate 45 degrees left</button>
#imageCanvas {
width: 350px;
height: 250px;
background-color: rgba(158, 167, 184, 0.2)
}
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext("2d");
function handleImage(e){
var reader = new FileReader();
reader.onload = function(e) {
var preview = document.createElement('img');
preview.onload = function()
{
canvas.width = preview.width;
canvas.height = preview.height;
canvas.getContext('2d').drawImage(preview, 0, 0);
};
preview.src = reader.result;
};
reader.readAsDataURL(e.target.files[0]);
}
document.getElementById('rotateLeft').addEventListener('click', rotateImage,
false);
function rotateImage() {
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var ww = w / 2;
var hh = h / 2;
ctx.save();
ctx.globalCompositeOperation = "copy";
ctx.translate(ww, hh);
ctx.rotate((Math.PI / 180) * 45);
ctx.drawImage(canvas, -canvas.width/2, -canvas.height/2);
ctx.restore();
}