使用畫布旋轉圖像

Question

我需要通過畫布旋轉圖像，並且可以通過cropper.js庫旋轉圖像，但是可以保存圖像並使用畫布進行條件處理不能使用旋轉格式來保存圖像。

在我的代碼中，我所經歷的是一個使我向90或-90度旋轉的事件。 然后在保存圖像時，我需要使用該格式保存。 我需要在圖像的軸上旋轉，以便在使用旋轉畫布保存圖像時將其保存在正確的位置。 我已經看到了一些方法，但是它對我沒有用，我不知道我正在輸。

    //Events to rotate using cropper Js library



          'click #rotateL': function(e, instance){
              $('#target').cropper('rotate', -90);
              angleInDegrees   = angleInDegrees - 90 ;
              drawRotated(angleInDegrees);
            },
            'click #rotateR': function(events, instance){
              $('#target').cropper('rotate', 90);
               angleInDegrees += 90;
               drawRotated(angleInDegrees);
            },

        function drawRotated(degrees){
        var canvas = $("#canvas")[0];
        var context = canvas.getContext('2d');
        var image = document.createElement("img");
         image.src = $('#target').attr("src");
        image.onload = function ()    {
         context.drawImage(image,(canvas.width - x1) / 2, 
          (canvas.height - y1) / 2,x1, y1);
         //ctx.drawImage(img, x, y, width, height)
         }
        context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
        context.translate(canvas.width/2,canvas.height/2);
        context.rotate(degrees*Math.PI/180);
        context.drawImage(image, -x1/2,-y1/2);
        context.restore();
        var dataURL = canvas.toDataURL("image/jpeg");
        Session.set("url", dataURL);
}


// event that saves the changes made when you cut the image or rotate.
'click #Save' : function(e) {
    $(".loader").fadeIn("slow");
    e.preventDefault();
    var photoid = $('#photoid').val();
    var dataURL = Session.get("url");
       var photo =  {
                srcData : dataURL,
                userid : Meteor.userId(),
                photo_id : photoid
        }

        Meteor.call('updatePhoto',photo,function(err)  {
          if (!err) {
             $('#photos').show();
             $('#crops').hide();
              canvas.height = 0;
              canvas.width = 0;
             //page relod is better than
               //document.getElementById('target').src="";
             FlowRouter.go('/search');
             FlowRouter.go('/addphoto');
        }
        });
    },

Answer 1

如果您使用的是cropper.js。 您可以使用內置方法getCroppedCanvas來編輯並裁剪新的畫布。 不用您自己寫東西。

var canvas = $ ('# target').cropper ('getCroppedCanvas');
console.log (canvas)
var dataURL = canvas.toDataURL ("image / jpeg");

Answer 2

在新畫布上順時針旋轉90度。

// assuming that image is a loaded image.
const canvas = document.createElement("canvas");
canvas.width = image.height;
canvas.height = image.width;
const ctx = canvas.getContext("2d");
ctx.setTransform(
    0,1,          // x axis down the screen
    -1,0,         // y axis across the screen from right to left
    image.height, // x origin is on the right side of the canvas 
    0             // y origin is at the top
);
ctx.drawImage(image,0,0);

將-90Deg旋轉到新畫布上

const canvas = document.createElement("canvas");
canvas.width = image.height;
canvas.height = image.width;
const ctx = canvas.getContext("2d");
ctx.setTransform(
    0,-1,       // x axis up the screen
    1,0,        // y axis across the screen from left to right
    0,          // x origin is on the left side of the canvas 
    image.width // y origin is at the bottom
);
ctx.drawImage(image,0,0);

原點是旋轉后圖像左上角最終的位置。