Таким образом, предупреждение дает неопределенные значения для ширины и высоты. Я думаю, что w и h значения изображения от img.onload вычисления не передаются значениям для возврата, или это может возвращать w и h, прежде чем onload вычислит их:
function getMeta(url){
var w; var h;
var img=new Image;
img.src=url;
img.onload=function(){w=this.width; h=this.height;};
return {w:w,h:h}
}
// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128
var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');
Как у меня может быть шоу предупреждения корректная ширина и высота?
function getMeta(url){
$("<img/>",{
load : function(){
alert(this.width+' '+this.height);
},
src : url
});
}
function getMeta(url){
var img = new Image();
img.onload = function(){
alert( this.width+' '+ this.height );
};
img.src = url;
}
function getMeta(url){
var img = new Image();
img.addEventListener("load", function(){
alert( this.naturalWidth +' '+ this.naturalHeight );
});
img.src = url;
}
вышеупомянутое Использования просто как: getMeta( "http://example.com/img.jpg" );
https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
ES6: Используя async/await
можно сделать ниже getMeta
функция подобным последовательности способом, и можно использовать его следующим образом (который почти идентичен для кодирования в вопросе (я добавляю await
ключевое слово и заменяю переменную end
к img
, и изменение var
к let
ключевое слово). Необходимо работать getMeta
[1 110] только от [1 111] (выполненная) функция.
function getMeta(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
async function run() {
let img = await getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
let w = img.width;
let h = img.height;
size.innerText = w+' width, '+h+' height';
size.appendChild(img);
}
run();
<div id="size" />
Просто передайте обратный вызов как аргумент как это:
function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
getMeta(
"http://snook.ca/files/mootools_83_snookca.png",
function(width, height) { alert(width + 'px ' + height + 'px') }
);
w
и h
переменные в img.onload
функция не находится в том же объеме с переменными в эти getMeta()
функция. Один способ сделать это, следующие:
Скрипка : http://jsfiddle.net/ppanagi/28UES/2/
function getMeta(varA, varB) {
if (typeof varB !== 'undefined') {
alert(varA + ' width ' + varB + ' height');
} else {
var img = new Image();
img.src = varA;
img.onload = getMeta(this.width, this.height);
}
}
getMeta("http://snook.ca/files/mootools_83_snookca.png");