Question

我想用两个按钮按模态打开图像，如下所示，向左旋转和向右旋转。我想要的是，如果用户单击向左旋转图像，则将在模式弹出窗口中向左旋转，而当用户单击向右旋转按钮并且也要保存图像时，想要在模式弹出窗口中向右旋转。

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' }); 
  });
});

如何实施？

Answer 1

按钮有两个小改动，这是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。只是一些服务器端逻辑来保存图像。在成功功能中，我是通过在末尾添加一个随机数来重新加载更改后的图像 src网址。这将迫使浏览器重新加载而不依赖于任何缓存。

  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

  }

});

Second Fiddle-由于图像尺寸过大，小提琴无法正常工作，但可以给您一个想法。

如何在模态内旋转图像？

1 个答案: