1

我正在使用来自 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 变量。

这个问题浮出水面，因为当用户上传照片时，有时这张照片会自动旋转。如果我可以先解决这个问题而不必让用户旋转图像会更好

4

1 回答 1

1

真是愚蠢的错误。代替：

cropper.cropper().rotate(90);

我应该申请：

cropper.cropper('rotate', 90);
于 2018-05-19T18:57:02.223 回答