同步检索图像分辨率

Question

我需要一个函数，它将URL作为对某些image的argument，并同步returns the resolution。我希望该功能在检索图像时简单地挂起。

大致如下：

function getImageDimensions(imageData) {
$("body").append("<img id='hiddenImage' src='" + imageData />"');
/* Wait until image is loaded */
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
return width;
}

Answer 1

编辑我完全想念这个。您只需将代码移动到$img.on('load', function() {...}内即可，如下所示。

function getImageDimensions(imageData) {
var $img = $(`<img id='hiddenImage' src='${imageData}' />`);

$img.on('load', function() {
/* Wait until image is loaded */
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert('width = ' + width);
console.log(width);
});

$("body").append($img);
}
getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

---

或者，与其尝试使其同步，不如尝试使其async。将函数更新为async返回Promise，并在imgloaded时resolve它。

从另一个async函数调用getImageDimensions并使用下面的await getImageDimensions我已经用test完成了。

async function getImageDimensions(imageData) {
return new Promise((resolve) => {
var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
$img.on('load', function() {
/* Wait until image is loaded */      
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert('width = ' + width);
resolve(width);
});
$("body").append($img);
});
}
async function test() {
let a = await getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
console.log(a);
}
test();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

---

或者，您可以将Promise与then一起使用并从onloadresolve它，之后将从then调用callback函数。因此，它将与synchronous代码类似。您可以编写在then中加载img后应完成的代码。

function getImageDimensions(imageData) {
new Promise((resolve) => {
var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
$img.on('load', function() {
resolve($img);
});
$("body").append($img);
}).then((result) => {
/* Wait until image is loaded */
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert('width = ' + width);
console.log(width);
});
}
getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Answer 2

你可以做这样的事情：

function getImageDimensions(imageData) {    
var image = new Image();
image.onload = function(data){
var width = data.target.width;
return width;
}
image.src = imageData;
}

Answer 3

一个函数不能返回多个值。但是，您可以通过返回包含多个值的数组来获得类似的结果。您可以返回一个值数组。

function getImageDimensions(imageData) {
$("body").append("<img id='hiddenImage' src='" + imageData />"');
/* Wait until image is loaded */
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
var size = [width, height];
return size;
}

或者，如果要标记每个返回值以便于访问和维护，也可以返回对象

function getImageDimensions(imageData) {
$("body").append("<img id='hiddenImage' src='" + imageData />"');
/* Wait until image is loaded */
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
var size = {
width: width,
height: height        
};
return size;
}