如何在Imgareaselect中选择图像根据像素进行选择

How we can select image in Imgareaselect according pixels

本文关键字：选择 像素 行选 图像 Imgareaselect      更新时间：2023-09-26

我是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});
});

希望你能理解我的问题。。。

抱歉太草率了，有点累。

如果您使用下面的代码，它与我上面的示例相同，只是您可以通过文本框动态更改宽度和高度的值：

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();

})；

如果您想从图像中进行选择以创建自定义预览图像，请尝试我的fiddle。只需进入javascript部分并更改thumbWidth和thumbHeight的值。基本上，它会将预览图像调整为您想要的尺寸，并将该比例用作aspectRatio。

Java脚本代码

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 });
});
相关文章：