如何从 Cropper 获得固定大小的作物答案

【问题标题】：How to get a fixed sized crop from Cropper如何从 Cropper 获得固定大小的作物
【发布时间】：2016-11-21 22:53:56
【问题描述】：

我正在使用 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 设置中定义的大小。

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

【问题讨论】：

标签： cropper

【解决方案1】：

会设置

zoomable: false,

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

【讨论】：

怎么样？我的建议完全解决了 OP 的问题，如果他愿意放弃该功能（他的帖子中并不清楚）。

【解决方案2】：

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 的最后一次调用将您在裁剪窗口中选择的任何内容缩小或放大到最终所需的图像大小。

【讨论】：