如何从Cropper获得固定大小的裁剪

Question

我正在使用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);

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

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

Answer 1

Would设置

zoomable: false,

对你的情况有帮助吗？或者您想保留用户的缩放功能？

Answer 2

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