Как повернуть изображение внутри модального? - PullRequest
Новая
       60

Как повернуть изображение внутри модального?

0 голосов
/ 04 июля 2019

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

enter image description here

index.php 

<a href="#" class="pop">
<img src="https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045_1280.jpg" style="width: 400px; height: 264px;">
</a>

<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>

<a href="#" class="pop">
<img src="https://cdn-images-1.medium.com/max/2600/1*694y5GwOWsqflOtu_4Lj-g.png" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
        <button id="left">rotate left</button>
        <button id="right">rotate right</button>
      </div>
</div>

JS 

$(function() {
    $('.pop').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');   
    });     
$("#left").on('click',function(){
img = $(this).prev();
$(this).prev().rotate({ endDeg:90, persist:true });
  }, function() {
$(this).prev().rotate({ endDeg:-90, duration:0.8, easing:'ease-in' }); 
  });
});

как это реализовать?

1 Ответ

0 голосов
/ 04 июля 2019

Два небольших изменения в ваших кнопках, и это JS, который будет вращать изображение. Вы захотите отрегулировать модальный, чтобы приспособить вращение. 

<button class="rotate" data-degrees="+90">rotate left</button>
<button class="rotate" data-degrees="-90">rotate right</button>


$(function() {
  var angle = 0;
  $('.pop').on('click', function() {
    $('.imagepreview').attr('src', $(this).find('img').attr('src')).css('transform', 'rotate(0deg)');
    $('#imagemodal').modal('show');
    angle = 0;
  });
  $(".rotate").on('click', function() {
    var img = $(this).parents('.modal-body').find('img');
    var degrees = Number($(this).data("degrees"));
    angle += degrees;

    img.css('transform', 'rotate(' + angle + 'deg)');
  });
});

Fiddle

Заметил, что вы запрашивали возможность сохранить файл. Я предполагаю, что вы хотите сохранить его повернутым.

Html: 

<a href="#" class="pop">
<img src="https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045_1280.jpg" data-img-src="https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045_1280.jpg" style="width: 400px; height: 264px;">
</a>

<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" data-img-src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>

<a href="#" class="pop">
<img src="https://cdn-images-1.medium.com/max/2600/1*694y5GwOWsqflOtu_4Lj-g.png" data-img-src="https://cdn-images-1.medium.com/max/2600/1*694y5GwOWsqflOtu_4Lj-g.png" style="width: 400px; height: 264px;">
</a>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <canvas id="canvas" ></canvas><br/>
        <button class="rotate" data-degrees="+90">rotate left</button>
        <button class="rotate" data-degrees="-90">rotate right</button>
      </div>
    </div>
  </div>
</div>

Javascript: 

$(function() {


  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var degree = 0;
  var image = document.createElement("img");

  $('.pop').on('click', function() {
    degree = 0;
    image.src = $(this).find('img').attr('src');
    $('.activeOne')..removeClass("activeOne")
    $(this).find('img').addClass("activeOne");
    drawImage(ctx, degree * Math.PI / 180, image);

    $('#imagemodal').modal('show');


  });

  $(".rotate").on('click', function() {

    var degrees = Number($(this).data("degrees"));

    degree += degrees;

    drawImage(ctx, degree * Math.PI / 180, image);
    var dataURL = canvas.toDataURL();
    $.post("script.php",{imgBase64: dataURL}, function(data){$(".activeOne").attr('src', $(".activeOne").data('img-src')+'?'+Math.random());});

  });

script.php: Это на вас. Вам нужно будет предоставить серверный процесс сохранить изображение в вашей базе данных. Это не должно быть php. Просто некоторая логика на стороне сервера для сохранения изображения. В функции успеха я перезагрузка измененного изображения путем добавления случайного числа в конец URL-адрес источника Это заставит браузер перезагрузиться и не зависеть от любое кеширование. 

  function drawImage(ctx, angle, image) {

    var dist = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2));
    var diagAngle = Math.asin(canvas.height / dist);

    var a1 = ((angle % (Math.PI * 2)) + Math.PI * 4) % (Math.PI * 2);
    if (a1 > Math.PI)
      a1 -= Math.PI;
    if (a1 > Math.PI / 2 && a1 <= Math.PI)
      a1 = (Math.PI / 2) - (a1 - (Math.PI / 2));

    var ang1 = Math.PI / 2 - diagAngle - Math.abs(a1);
    var ang2 = Math.abs(diagAngle - Math.abs(a1));

    var scale1 = Math.cos(ang1) * dist / image.height;
    var scale2 = Math.cos(ang2) * dist / image.width;

    var scale = Math.max(scale1, scale2)

    var dx = Math.cos(angle) * scale
    var dy = Math.sin(angle) * scale



    ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2)
    ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
    ctx.setTransform(1, 0, 0, 1, 0, 0) // reset transformations when done

  }

});

Вторая скрипка - Скрипка работает не так хорошо из-за больших размеров изображения, но дает представление.

...