javascript - 我们如何在 Imgarea 中选择图像根据像素选择

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

抱歉，有点马虎，有点累。

如果您使用下面的代码，它的作用与上面的示例相同，只是您可以动态更改 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();

});