4

我正在使用 Cropper 尝试从上传的图像中获取固定大小的裁剪。这个想法是，如果（如果需要）网站管理员将能够缩放并在无法更改的 Cropper 中构图新图像。通过这种方式，所有被裁剪的图像都是完全相同的大小。

除非用户放大，否则此方法有效。在这种情况下，生成的图像较小，如果缩小，则图像较大。

我正在用这个初始化裁剪器：

$('#image').cropper({
        aspectRatio: 16 / 9,
        cropBoxResizable: false,
        dragMode: 'move',
        built: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        },
        cropmove: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        }
    });

然后使用以下方法获取要上传的dataUrl：

var image = $("#image").cropper("getCroppedCanvas").toDataURL('image/jpeg', 1);

通过查看裁剪框所界定的区域，然后使用原始尺寸裁剪图像，它似乎正在裁剪。换句话说，框只是定义了图像的一个边界区域，然后裁剪器以原始大小从原始图像中裁剪出来。我需要它们是 Cropper 设置中定义的大小。

如果您需要更多，请告诉我。

4

2 回答 2

1

会设置

zoomable: false,

对你的情况有帮助吗？还是想保留用户的缩放能力？

于 2017-03-07T22:44:54.897 回答
1

var image = $("#image").cropper("getCroppedCanvas").toDataURL('image/jpeg', 1);

您实际上可以做的是更改上述行并使用“getCroppedCanvas”为您提供所需的任何尺寸。所以在JS的某个地方：

var finalCropWidth = 640;
var finalCropHeight = 480;
var finalAspectRatio = finalCropWidth / finalCropHeight;

...

$('#image').cropper({
                viewMode: 3,
                aspectRatio: finalAspectRatio,
                zoomable: true,
                dragMode: 'move',

});

...

var image = 
$("#image").cropper("getCroppedCanvas", { width: 640, height: 480 }).toDataURL('image/jpeg', 1);

现在用户可以缩放和更改裁剪窗口的大小，一切正常，因为纵横比与最终所需的图像相同。使用 getCroppedCanvas 的最后一次调用将您在裁剪窗口中选择的任何内容缩小或放大到最终所需的图像大小。

于 2019-08-09T18:37:25.657 回答