Question

我是jQuery的新手。我想根据145x190,140X180等像素选择图像。我能够按比例完成，但不能根据像素或维数。请帮助我。我的代码是：

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);

    $('#ferret + div > img').css({
        width: Math.round(scaleX * 400) + 'px',
        height: Math.round(scaleY * 300) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px',

    });
}

$(document).ready(function () {
    $('<div> <img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" style="position: relative;"> </div>')
        .css({
            float: 'right',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#ferret'));

    $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100});
});

希望你理解我的问题...

Answer 1

如果要从图像中选择以创建自定义预览图像try my fiddle。只需进入javascript部分，然后更改thumbWidth和thumbHeight的值即可。基本上它会将预览图像调整为您要查找的尺寸，并将该比率用作aspectRatio。

JAVASCRIPT CODE

var thumbWidth = 200, thumbHeight = 200;

function preview(img, selection) {
    var scaleX = thumbWidth / (selection.width || 1);
    var scaleY = thumbHeight / (selection.height || 1);

    $('#ferret + div > img').css({
        width: Math.round(scaleX * $("#ferret").width()) + 'px',
        height: Math.round(scaleY * $("#ferret").height()) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

$(document).ready(function () {

    $('<div><img src="http://odyniec.net/projects/imgareaselect/ferret.jpg" style="position: relative;" /><div>')
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: thumbWidth + 'px',
            height: thumbHeight + 'px'
        })
        .insertAfter($('#ferret'));

    $('#ferret').imgAreaSelect({aspectRatio: thumbWidth+':'+thumbHeight, onSelectChange: preview });
});

Answer 2

抱歉草率，有点累。

如果您使用下面的代码，它与我上面的示例相同，只是您可以动态更改width and height through the textboxes的值：

<强> HTML

<div class="container">
    <div>
        <input id="thumbWidth" placeholder="width" value="200" />
        <input id="thumbHeight" placeholder="height" value="200" />
    </div>
    <p>
        <img id="ferret" src="http://odyniec.net/projects/imgareaselect/ferret.jpg" alt="It's coming right for us!" title="It's coming right for us!" style="float: left; margin-right: 10px;" />
    </p>
</div>

<强> JAVASCRIPT

$(document).ready(function () {
var defaultVal = 100;
var thumbWidth = $('#thumbWidth').val() | defaultVal,
    thumbHeight = $('#thumbHeight').val() | defaultVal;
$('#thumbWidth').on("change keyup", function () {
    thumbWidth = this.value | defaultVal;
    reLoad('cancel');
});
$('#thumbHeight').on("change keyup", function () {
    thumbHeight = this.value | defaultVal;
    reLoad('cancel');
});


function preview(img, selection) {
    var scaleX = thumbWidth / (selection.width || 1);
    var scaleY = thumbHeight / (selection.height || 1);

    $('#ferret + div > img').css({
        width: Math.round(scaleX * $("#ferret").width()) + 'px',
        height: Math.round(scaleY * $("#ferret").height()) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}
var reLoad = function (cancel) {
    $('.premove').remove();
    $('<div class="premove"><img src="http://odyniec.net/projects/imgareaselect/ferret.jpg" style="position: relative;" /><div>')
        .css({
        float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: thumbWidth + 'px',
        height: thumbHeight + 'px'
    })
        .insertAfter($('#ferret'));

    var fer = $('#ferret').imgAreaSelect({
        aspectRatio: thumbWidth + ':' + thumbHeight,
        onSelectChange: preview,
        instance: true
    });
    if (cancel) fer.cancelSelection();
}
reLoad();

}）;

我们如何根据像素选择Imgareaselect中的图像

2 个答案: