使用cropper js旋转

Question

我正在使用 croppers 库，我在某些 Android 设备上实现它时遇到问题照片是垂直拍摄的我是水平的我试图调整水平或垂直旋转部分（90 或 180度）与铜 js 但根本没有成功。

我在 meteor 中工作我的代码我留下了一部分代码。 html部分

<div class=" col-xs-6 ">
    <div>
        {{#if photo_2}}
        <img class="img-responsive" src='{{photo_2}}' alt="" style="width:1531px;height:114px;"/>
        {{else}}
        <img class="img-responsive" src="/persona2.png" alt="" />
        {{/if}}
    </div>
    <div class="col-xs-12">
        <button type="" class="btn-default btn-picture btn" id="btn2"><i class="fa fa-plus plus" aria-hidden="true"></i></button>
    </div>
</div>
<input type="hidden" id="photoid">
<input id="file-upload" style="display: none;" type="file" accept="image/*" />
<div id="snackbar">
    <img class="img-responsive cameraphoto"  id="cameraphoto" src="/camera-icon-55.png" alt="" />
    <img class="img-responsive" id="explorer" onclick="$('#file-upload').click();" src="/camera-icon-56.png" alt="" />
    <img class="img-responsive"  id="delete" src="/delete.png" />
</div>

<div id="crops" style="display: none; background-color: black;height: 100vh;">
    <canvas id="canvas" height="5" width="5" style="display: none;"></canvas>
    <img id="target" style="max-width: 100%" />
    <img id="targeted" style="max-width: 100%" />

    <div style="position: absolute; margin-top: 145px; bottom: 20px; width: 100%;text-align: center;">
        <center>
            <img class="img-responsive" id="Save" src="/save.png" alt="" style="width: 48px;margin-left: -78px;"/>
            <img class="img-responsive" id="cancel"  src="/cancel.png" alt="" style="width: 54px;margin-left: 62px;margin-top: -50px;"/>
            <image id="Browser" src=""/>
        </center>
        <input type="hidden" id="photoid">
    </div>

    <input type="hidden" name="imgX1" id="imgX1" />
    <input type="hidden" name="imgY1" id="imgY1" />
    <input type="hidden" name="imgWidth" id="imgWidth" />
    <input type="hidden" name="imgHeight" id="imgHeight" />
    <input type="hidden" name="imgrotate" id="imgrotate" />
    <input type="hidden" name="imgscaleX" id="imgscaleX" />
    <input type="hidden" name="imgscaleY" id="imgscaleY" />
</div>

javaScript代码

 'click .cameraphoto' : function(e , instance)   {
       var photoid = $('#photoid').val();
        var options = {
            width: 800,
            height: 600,
  };
    MeteorCamera.getPicture(options, function (error, data) {
      if (!error)   {
          $('#photos').hide();
          $('#crops').show();
          document.getElementById('target').src = "";
          document.getElementById('target').src = data;
          $('#target').cropper(  {
            aspectRatio: 1 / 1,
            minCropBoxWidth : 150,
            minCropBoxHeight :150,
            crop: function(e)  {
                $('#imgX1').val(e.x);
                $('#imgY1').val(e.y);
                $('#imgWidth').val(e.width);
                $('#imgHeight').val(e.height);
                $('#imgrotate').val(e.rotate);
                $('#imgscaleX').val(e.scaleX);
                $('#imgscaleY').val(e.scaleY);
            }
          // cropper.rotate(instance.state.get("left"));
      //    rotateTo(instance.state.get("left"))
         });
        }
     });
    }
'change #file-upload' :function(e) {
      $(".loader").fadeIn("slow");
      encodeImageFileAsURL();
      function encodeImageFileAsURL(){
        var filesSelected = document.getElementById("file-upload").files;
        if (filesSelected.length > 0) {
          var fileToLoad = filesSelected[0];
          var fileReader = new FileReader();
          fileReader.onload = function(fileLoadedEvent)      {
                 $('#photos').hide();
                 $('#crops').show();
                 $(".loader").fadeOut("slow");
                 document.getElementById('target').src = "";
                 document.getElementById('target').src = fileLoadedEvent.target.result;
                 $('#target').cropper( {
                  aspectRatio: 1 / 1,
                  minCropBoxWidth : 150,
                  minCropBoxHeight :150,
                  crop: function(e)  {
                     $('#imgX1').val(e.x);
                     $('#imgY1').val(e.y);
                     $('#imgWidth').val(e.width);
                     $('#imgHeight').val(e.height);
                     $('#imgrotate').val(e.rotate);
                     $('#imgscaleX').val(e.scaleX);
                     $('#imgscaleY').val(e.scaleY);
                  }
                });

            }
          fileReader.readAsDataURL(fileToLoad);}}
    },
    'click #Save' : function(e) {
        $(".loader").fadeIn("slow");
        e.preventDefault();
        var photoid = $('#photoid').val();
        var x1 = $('#imgX1').val();
        var y1 = $('#imgY1').val();
        var width = $('#imgWidth').val();
        var height = $('#imgHeight').val();
        var rotate = $('#imgrotate').val();
        var scaleX = $('#imgscaleX').val();
        var scaleY = $('#imgscaleY').val();
        var canvas = $("#canvas")[0];
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = $('#target').attr("src");
        img.onload = function ()    {
           canvas.height = height;
           canvas.width = width;
           context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
           var dataURL = canvas.toDataURL("image/jpeg");
           //console.log('canvas',dataURL);
           var photo =  {
                    srcData : dataURL,
                    userid : Meteor.userId(),
                    photo_id : photoid
            }
            Meteor.call('updatePhoto',photo,function(err)  {
              if (!err) {
                 $('#photos').show();
                 $('#crops').hide();
                  $('#imgX1').val('');
                  $('#imgY1').val('');
                  $('#imgWidth').val('');
                  $('#imgHeight').val('');
                  $('#imgrotate').val('');
                  $('#imgscaleX').val('');
                  $('#imgscaleY').val('');
                  canvas.height = 0;
                  canvas.width = 0;
                 //page relod is better than
                 FlowRouter.go('/search');
                 FlowRouter.go('/addphoto');
            }
            });
        }
    },
    'click #cancel' :function() {
        $('#photos').show();
        $('#crops').hide();
        document.getElementById('target').src="";
        FlowRouter.go('/search');
        FlowRouter.go('/addphoto');
    },

Answer 1

我的解决方案基于以下内容

'click #rotateL': function(e, instance){
      $('#target').cropper('rotate', -90);
    },
    'click #rotateR': function(e, instance){
      $('#target').cropper('rotate', 90);
    },
'click #Save' : function(e) {
        $(".loader").fadeIn("slow");
        e.preventDefault();
        var photoid = $('#photoid').val();
        var canvas = $('#target').cropper('getCroppedCanvas');
        console.log(canvas)
        var dataURL = canvas.toDataURL("image/jpeg");
        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');
            }
            });
    },

使用cropper js旋转

Rotation using cropper js

javascript

meteor

cropperjs