Question

这可能是一个非常愚蠢的问题。我正在让用户使用imgAreaSelect jQuery插件上传自己的照片。正如许多用户在此处以及其他地方发现的那样，当使用CSS调整大小时，裁剪未正确选择部分。值得庆幸的是，imgAreaSelect可以使用imageHeight和imageWidth来处理这个问题。这里已经有了答案，让我开始吧。可悲的是，我还没有评论那里。

我的问题是找到附加图像的真实高度和宽度。我已经尝试了各种方法来获取它，但每次都没有为originalHeight / originalWidth定义控制台输出，如下所示。

第一个，这是在这里找到的解决方案，是：

var imageSize = $("#uploadImage");

var originalHeight = imageSize.naturalHeight;
var originalWidth = imageSize.naturalWidth;

第二个是this.width / this.height，在这里找到：stackoverflow.com/questions/318630：

var imageSize = $("uploadImage")[0]; 
var originalWidth, originalHeight;
$("<img/>") 
    .attr("src", $(imageSize).attr("src"))
    .load(function() {
        originalWidth = this.width;  
        originalHeight = this.height; 
    });

我将完整的代码放在下面因为我可能完全错过了一些东西，因为我显然是初学者。图像显示在预览和裁剪中，但不正确。

function getCoordinates(img, selection) {
    var porcX = img.naturalWidth / img.width;
    var porcY = img.naturalHeight / img.height;

    $('#x1').val(Math.round(selection.x1 * porcX));
    $('#y1').val(Math.round(selection.y1 * porcY));
    $('#x2').val(Math.round(selection.x2 * porcX));
    $('#y2').val(Math.round(selection.y2 * porcY));
    $('#w').val(Math.round(selection.width * porcX));
    $('#h').val(Math.round(selection.height * porcY));
}

$(document).ready(function() {

    var preview = $("#uploadPreview");

    $("#uploadImage").change(function(){

        preview.fadeOut();

        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            preview.attr('src', oFREvent.target.result).fadeIn();
        };
    });

    var imageSize = $("#uploadImage");

    var originalHeight = imageSize.naturalHeight;
    var originalWidth = imageSize.naturalWidth;

    $('#uploadPreview').imgAreaSelect({
        aspectRatio: '24:29',
        handles: true,
        fadeSpeed: 200,
        imageHeight: originalHeight, 
        imageWidth: originalWidth,
        onSelectChange: getCoordinates 
    });

});

Answer 1

试试这个：

    var img = $("img")[0]; // Get my img elem
    var pic_real_width, pic_real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

找到图像的真实高度和宽度

1 个答案: