Question

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

我在流星中处理我的代码我留下了部分代码。 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旋转

1 个答案: