Question

我正在使用Cropper尝试从上传的图像中获取固定大小的裁剪。这个想法是网站的管理员将能够缩放if（如果需要）并在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设置中定义的大小。

如果您需要更多信息，请与我们联系。

Answer 1

会设置

ShiftReg seg_7(); void refresh() { char livewrite = hex_nums[lives]; seg_7.write(livewrite); lcd.clear(); drawsprite(hx,hy,HeroX,HeroY,hero); lcd.refresh(); }

帮助你的情况？或者你想保留用户的缩放能力？

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

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

2 个答案: