Как перевернуть холст из его текущего положения

Я пытаюсь добавить параметры переворота и поворота на холст, но после поворота, если я переворачиваю, он переворачивается из положения загрузки страницы, а не из текущего повернутого положения.

Вот мой код jQuery для переворачивания и вращения:

    var k = 0;
            $('#flip_image_btn').click(function(){
                var j = $('.dithered-image');
                k += 180;
                $('.dithered-image').css({
                    "transform":"rotatey(" + k + "deg)",
                    "transitionDuration":"0.5s"
                });

            });


            var rotation = 0;
            $("#rotate_image_clockwise_btn").click(function(){ 
                rotation = rotation+18;                 
                $('.dithered-image').css("transform", "rotate("+rotation+"deg)");
            });
            $("#rotate_image_anticlockwise_btn").click(function(){ 
                rotation = rotation-18;                 
                $('.dithered-image').css("transform", "rotate("+rotation+"deg)");
            });

Есть ли способ перевернуть изображение в том виде, в котором оно есть, вместо того, чтобы вернуться в загруженное положение, а затем перевернуть?

вот скрипт, показывающий, что происходит https://jsfiddle.net/muugzans/1/

заранее спасибо


canvas jquery css rotation flip
person Barry Watts    schedule 01.10.2017    source источник
comment
Вам нужно сохранить изображение как перевернутое или только показать его перевернутым?   -  person    schedule 01.10.2017
comment
Мне нужно сохранить изображение, когда пользователь закончит листать и вращать   -  person Barry Watts    schedule 01.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

вам нужно объединить их, то, что вы делаете, это переопределение преобразования другим, попробуйте вместо этого:

window.onload = function() {
  /*var c = document.getElementById("myCanvas");
  var ctx = c("2d");

  ctx.drawImage(img, 10, 10);*/
}
var k = 0;
var rotation = 0;
$('#flip_image_btn').click(function() {
  var j = $('.dithered-image');
  k += 180;
  $('.dithered-image').css({
    "transform": "rotate(" + rotation + "deg) rotatey(" + k + "deg)",
    "transitionDuration": "0.5s"
  });

});



$("#rotate_image_clockwise_btn").click(function() {
  rotation = rotation + 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});
$("#rotate_image_anticlockwise_btn").click(function() {
  rotation = rotation - 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});
.dithered-image {
  max-width: 550px;
  max-height: 350px;
  width: 100%;
  top: 130px;
  left: 150px;
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#myCanvas {
  width: 150px;
  height: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="button" class="button" value="Flip Image" id="flip_image_btn" />
<button style="font-size:24px" id="rotate_image_clockwise_btn">rotate</button>

<img class="dithered-image" id="myCanvas" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_1280.jpg" width="100" />

person Temani Afif    schedule 01.10.2017
comment
отличный материал .. спасибо, сэкономил мне несколько часов биться головой о стол :-) - person Barry Watts; 01.10.2017