2

如何使用来自cropperjs的数据使用 ImageMagick 执行调整大小和裁剪?

用户可以上传大图像并缩放/平移以进行裁剪。尝试使用 blob,但它失去了太多质量并且经常超时。

来自小提琴以下数据的示例:

Original Width: 1280
Original Height: 720
Width: 424.8717011756327
Height: 238.9903319112934
X: -155.17118867901692
Y: -1.4989251522088705
Scale: 23.82

试过这个,但它种植了错误的区域。还尝试缩放原始图像,但这对于服务器来说太大了。

convert orignial.jpg -resize "1280x720^" -gravity center -crop 424x238+-155+-1 +repage result.jpg 

示例: https ://jsfiddle.net/1knw3a5e/

JS代码:

$(function() {
    var image = $('#crop-image');
    var zoomSlider = document.getElementById('zoom-slider');
    var canvasSize = null;
    var pictureContainer = $('.picture-frame');
    var maxPictureContainerWidth = parseFloat(pictureContainer.css('max-width')) || 450;
    var maxPictureContainerHeight = parseFloat(pictureContainer.css('max-height')) || 350;
    var isSliderInUse = false;

    // Wall is in Cm, convert to Inches to work out pixel sizes at 300dpi
    var wallWpx = (0.393700787 * pictureContainer.attr('data-width')) * 300; // data-width is the wall width in pixels
    var wallHpx = (0.393700787 * pictureContainer.attr('data-height')) * 300; // data-height is the wall height in pixels

    var sampleImageScaleFactor = (image.attr('width') / image.attr('original-width'));

    var wallSize = {
        width: wallWpx * sampleImageScaleFactor, // scaling the wall size corresponding the sample size
        height: wallHpx * sampleImageScaleFactor,
        originalWidth: pictureContainer.attr('data-width'),
        originalHeight: pictureContainer.attr('data-height')
    };
    var wallAspectRatio = wallSize.originalWidth/wallSize.originalHeight;
    var pictureContainerSizes = {
        'width': maxPictureContainerWidth * (wallAspectRatio > 1 ? 1 : wallAspectRatio) ,
        'height': maxPictureContainerHeight / (wallAspectRatio > 1 ? wallAspectRatio : 1)
    };
    pictureContainer.css(pictureContainerSizes).removeClass('hidden');
    var zoomStep = 0.2;
    var biggerSide = null;

    var zoomModal = $('#modal-warning');
    var handleZoomHold, handleZoomFired;

    image.cropper({
        zoom: 0.2,
        guides: false,
        cropBoxResizable: false,
        cropBoxMovable: false,
        //viewMode: 3,
        dragMode: 'move',
        left: 0,
        top: 0,
        //width: canvasSize.width,
        //height: canvasSize.height,
        //aspectRatio: 1,
        toggleDragModeOnDblclick: false,
        zoomOnTouch: true,
        zoomOnWheel: true
    });  

    // Event
    image.on('built.cropper', function() {
        image.cropper('setCropBoxData', {
            left: 0,
            top: 0,
            width: pictureContainerSizes.width,
            height: pictureContainerSizes.height
        });
        canvasSize = {
            width: image.cropper('getCropBoxData').width,
            height: image.cropper('getCropBoxData').height
        };
        biggerSide = canvasSize.width === image.cropper('getImageData').width ? 'width' : 'height';

        var savedCropperSettings = {
            sliceW: parseFloat($('input[name=sliceW]').val()),
            sliceH: parseFloat($('input[name=sliceH]').val()),
            sliceX: parseFloat($('input[name=sliceX]').val()),
            sliceY: parseFloat($('input[name=sliceY]').val()),
            scale: parseFloat($('input[name=scale]').val()) // saved adoptedZoomFactor
        };

        if (!savedCropperSettings.scale) {
            return;
        }

        /* restoring saved settings */
        image.cropper('zoomTo', canvasSize[biggerSide]/(wallSize[biggerSide]/savedCropperSettings.scale.toFixed(1)));

        var cropboxData = image.cropper('getCropBoxData');
        var scaleFactor = wallSize.originalHeight / cropboxData.height;
        image.cropper('setCanvasData', {
            left: savedCropperSettings.sliceX / scaleFactor + cropboxData.left,
            top: savedCropperSettings.sliceY / scaleFactor + cropboxData.top
        });
    });

    var adoptedZoomFactor = NaN;
    var adoptedZoomElement = $('#adoptedZoom');
    image.on('crop.cropper', function() {
        var data = image.cropper('getData');
        var canvasData = image.cropper('getCanvasData');
        var cropboxData = image.cropper('getCropBoxData');
        var scaleFactor = wallSize.originalHeight / cropboxData.height;
        adoptedZoomFactor = parseFloat((wallSize[biggerSide] / data[biggerSide]).toFixed(2));
        adoptedZoomElement.text(adoptedZoomFactor);

        $('input[name=sliceW]').val(canvasData.width * scaleFactor);
        $('input[name=sliceH]').val(canvasData.height * scaleFactor);
        $('input[name=sliceX]').val((canvasData.left - cropboxData.left) * scaleFactor);
        $('input[name=sliceY]').val(canvasData.top * scaleFactor);
        $('input[name=scale]').val(adoptedZoomFactor);

    });

});
4

2 回答 2

2

该裁剪工具在我的 Mac 上的 Safari、Firefox 或 Chrome 中无法正常工作。它不尊重输入的比例值。它总是以 scale=1 的结果出现。也许我做错了。

但是如果你想在 ImageMagick 中这样做,正确的方法是:

原来的:

在此处输入图像描述

裁剪屏幕快照:

在此处输入图像描述

裁剪器结果(尺寸 320x180;仍然比例=1):

在此处输入图像描述

使用 ImageMagick(尺寸 640x360):

ww=320
hh=180
xx=40
yy=60
rotate=0
scale=2
scale=`convert xc: -format "%[fx:$scale*100]" info:`
convert barn.jpg -virtual-pixel white -define distort:viewport=${ww}x${hh}+${xx}+${yy} -filter point -distort SRT "$rotate" +repage -resize $scale% test.jpg


在此处输入图像描述

请注意,ImageMagick -distort SRT 允许缩放,但缩放是在从视口裁剪之前完成的。所以我必须先使用视口裁剪,然后添加 -resize 百分比(因为 scale=2 --> scale=200%)

我将 -distort SRT 与视口裁剪一起使用的原因是,当 xx 和 yy 值为负时,它将允许进行偏移裁剪。你不能用简单的 -crop 做到这一点。

例如:

ww=320
hh=180
xx=-40
yy=-60
rotate=0
scale=1
scale=`convert xc: -format "%[fx:$scale*100]" info:`
convert barn.jpg -virtual-pixel white -define distort:viewport=${ww}x${hh}+${xx}+${yy} -filter point -distort SRT "$rotate" +repage -resize $scale% test2.jpg


在此处输入图像描述

如果您下载图像,您会看到它在顶部和右侧填充了白色,但尺寸仍然为 320x180。

如果您只在图像的范围内裁剪,那么您可以使用 -crop 并且 Imagemagick 命令将是:

ww=320
hh=180
xx=40
yy=60
rotate=0
scale=2
scale=`convert xc: -format "%[fx:$scale*100]" info:`
convert barn.jpg -crop ${ww}x${hh}+${xx}+${yy} +repage -resize $scale% test4.jpg


在此处输入图像描述

这会产生与我原来的视口裁剪相同的结果。

于 2018-08-29T20:28:34.327 回答
0

我只使用来自的数据getData而没有对结果进行任何数学运算就取得了成功。

var croppable = $('.croppable');
croppable.cropper({
  autoCrop: true, 
  viewMode: 0,
  background: false,
  modal: true,
  zoomable: true,
  responsive: false, 
  crop: function(e) {
    data = croppable.cropper('getData');
    $('#extract_image_crop_x').val(data.x);
    $('#extract_image_crop_y').val(data.y);
    $('#extract_image_crop_width').val(data.width);
    $('#extract_image_crop_height').val(data.height);
    $('#extract_image_crop_rotate').val(data.rotate);
  }
});
于 2019-04-22T19:58:40.113 回答