Question

我正在尝试为我的照片编辑器实现rotate功能。我是使用HTML5元素，尤其是canvas元素的新手。

现在，单击按钮后图像将旋转，但是在保持宽高比的情况下不会旋转图像。为了具体起见，我在下面提供了两张图片：在旋转按钮为点击，然后点击一个。

旋转前：

旋转后：

如您所见，图像确实会旋转，但是会裁切大部分图像。我想念什么吗？任何帮助将不胜感激。

这是到目前为止我尝试过的结果，上面显示了

function rotateImage(degrees, image) {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");

    if(degrees == 90 || degrees == 270) {
        canvas.width = image.height;
        canvas.height = image.width;
    } else {
        canvas.width = image.width;
        canvas.height = image.height;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if(degrees == 90 || degrees == 270) {
        ctx.translate(image.height/2,image.width/2);
    } else {
        ctx.translate(image.width/2,image.height/2);
    }
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);

    var dataURL = canvas.toDataURL();
    $("#image").attr('src', dataURL);
}

document.getElementById("rotate").addEventListener("click", function() {
var el = this;
var data = el.getAttribute('data-value');
  var angleInDegrees = 0;

  if(data == 90) {
    angleInDegrees += 90 % 360;
  } else {
    if(angleInDegrees == 0) {
      angleInDegrees = 270;
    } else {
      angleInDegrees -= 90;
    }
  }
  // rotate the image based on degree value
  rotateImage(angleInDegrees, document.getElementById("canvas"));
});

编辑：

现在，它确实会在保持宽高比的同时旋转图像，但只执行一次。如果再次单击旋转按钮，它将裁切约原始图像尺寸的20％。没有更多照片可以展示：

旋转前

一次单击旋转按钮后

再次点击旋转按钮后

修改的功能

function rotateImage(degrees, image) {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");

    if(degrees == 90 || degrees == 270) {
        canvas.width = image.height;
        canvas.height = image.width;
    } else {
        canvas.width = image.width;
        canvas.height = image.height;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();

    if(degrees == 90 || degrees == 270) {
        ctx.translate(image.height/2,image.width/2);
    } else {
        ctx.translate(image.width/2,image.height/2);
    }
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);
    ctx.restore();

    var dataURL = canvas.toDataURL();
    image.setAttribute('src', dataURL);
}

Answer 1

我对您的代码进行了一些更改。

if(data == "90")而不是if(data == 90)，因为它是一个字符串
我在转换周围添加了ctx.save()和ctx.restore()

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");


let cw = canvas.width = image.width;
let ch = canvas.height = image.height;

ctx.drawImage(image, 0 , 0);



function rotateImage(degrees, image) {

    if(degrees == 90 || degrees == 270) {
        cw = image.height;
        ch = image.width;
    } else {
        cw = image.width;
        ch = image.height;
    }

    ctx.clearRect(0, 0, cw, ch);
    ctx.save()
    ctx.translate(cw/2,ch/2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2 , -image.height / 2);
    ctx.restore();
    var dataURL = canvas.toDataURL();
    image.setAttribute('src', dataURL);
}

rotate.addEventListener("click", function() {
var el = this;
var data = el.dataset.value; console.log(data)
  var angleInDegrees = 0;

  if(data == "90") {
    angleInDegrees += 90 % 360;
  } else {
    if(angleInDegrees == 0) {
      angleInDegrees = 270;
    } else {
      angleInDegrees -= 90;
    }
  }


  // rotate the image based on degree value
  rotateImage(angleInDegrees, image);
});

在保持宽高比的同时旋转画布图像

1 个答案: