2

我正在尝试在语义模式中添加cropper.js。我正在做以下步骤。

1) 我在页面上有一个名为[Choose image]的按钮

2）如果我单击选择图像，则一种模式是打开名称是 [thumbs]。拇指模式有 2 个按钮[从本地电脑中选择]和[选择媒体]。

3）如果我点击从本地 pc 文件中选择对话框打开并且图像选择器正在工作并且cropper.js 被分配给选定的图像完美

4) 如果我点击选择媒体按钮，他们会打开[媒体]模态，我有很多图像，如果我点击图像路径，我在每个图像上都有一个按钮，则传递到名为 thumbs 的上一个模态并分配裁剪工具但是尺寸比给定尺寸小，如果我打开检查铬裁剪器尺寸的元素是完美的。

您会更好地使用以下图像。

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

如果看到最后 2 张图像，您可以在图像上有所不同。

我正在使用https://fengyuanchen.github.io/cropperjs/进行裁剪功能。

谢谢

4

1 回答 1

2

当你初始化你的裁剪器时，传递 minContainerWidth 和 minContainerHeight。在这里，我通过了 846 和 280。

var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
    dragMode: 'move',
    autoCropArea: 1,
    cropBoxMovable: false,
    cropBoxResizable: false,
    viewMode: 3,
    minContainerWidth: 846,
    minContainerHeight: 280,
    crop: function(e) 
    {
        var image_data = e.x +"#"+ e.y +"#846#280";
        $("#img-preview-media-web-image-data").val(image_data);
    }
});


and in cropper.js file change following line

/*$cropper.css((this.container = {
    width: max($container.width(), num(options.minContainerWidth) || 200),
    height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/

$cropper.css((this.container = {
    width: options.minContainerWidth ,
    height: options.minContainerHeight
}));

裁剪器 js 中的第 806 到 809 行

于 2016-09-30T06:30:53.227 回答