未定义旋转 cropper.js
rotate is not defined cropper.js
我正在使用来自 fengyuanchen 的很棒的 jquery-cropper 插件。
我遇到的问题是,某些图片在上传时会旋转,但它不在我必须让用户旋转它们的右侧。我将通过 ajax
上传图片。我收到错误 rotate is not defined
,我已经被困了几个小时。
$('#profilePhoto').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
$("#profileImageContainer").hide();
$("#rotateImg").show();
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
cropper = canvas.cropper({
aspectRatio: 1 / 1,
rotatable: true,
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
});
$('#rotateImg').click(function () {
cropper.cropper.rotate(90);
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
这里的主要问题是关于范围的,因为它看起来没有重新调整 cropper 变量。
这个问题很明显,因为当用户上传照片时,有时这张照片会自动旋转。如果我能先解决这个问题而不必让用户旋转图像会更好
真是愚蠢的错误。而不是:
cropper.cropper().rotate(90);
我应该申请:
cropper.cropper('rotate', 90);
我正在使用来自 fengyuanchen 的很棒的 jquery-cropper 插件。
我遇到的问题是,某些图片在上传时会旋转,但它不在我必须让用户旋转它们的右侧。我将通过 ajax
上传图片。我收到错误 rotate is not defined
,我已经被困了几个小时。
$('#profilePhoto').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
$("#profileImageContainer").hide();
$("#rotateImg").show();
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
cropper = canvas.cropper({
aspectRatio: 1 / 1,
rotatable: true,
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
});
$('#rotateImg').click(function () {
cropper.cropper.rotate(90);
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
这里的主要问题是关于范围的,因为它看起来没有重新调整 cropper 变量。
这个问题很明显,因为当用户上传照片时,有时这张照片会自动旋转。如果我能先解决这个问题而不必让用户旋转图像会更好
真是愚蠢的错误。而不是:
cropper.cropper().rotate(90);
我应该申请:
cropper.cropper('rotate', 90);