I'm working with the croppers library, I have the problems implementing it on some Android devices the photo being taken vertically I get horizontal I tried to adapt the horizontal or vertical rotation part (90 or 180 degrees) with copper js but not Succeeded at all.
I'm working my code in meteor I leave a part of the code. html part
<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 code
'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');
},
My solution was based on the following
'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');
}
});
},