js动态加载图片,获取图片宽高并缩放

近期在项目中遇到个问题: 

一个下拉框改变后就去后台取一张图片到页面展示进行框选获取坐标,但是不知道图片多大的,所以会将获取回来的图片进行等比的缩放.

问题来了: 获取回来的图片我先存在一个隐藏的img中,然后在动态生成一个img标签来显示,这个img的高宽是获取的隐藏img的高宽就行缩放的,src是隐藏img的路径.但是现在的话第一次怎么也获取不到隐藏img的高宽值.

第一次:

var imgTd = $('#imgTd');
imgTd.html('');
$('#img1').attr('src', data.path);
var img1 = document.getElementById('img1');
var img = $('<img />', {'id': 'img2','width': (img1.width/2),'height': (img1.height/3),'src': (img1.src)});
img.appendTo(imgTd);

上面这样的代码第一次总是获取不到img1的高宽.
第二次:

var imgTd = $('#imgTd');
imgTd.html('');
var im = new Image();
im.src = data.path;
$(im).load(function(){
$('#img1').attr('src', data.path);
var img = $('<img />', {'id': 'img2','width': (im.width/2),'height': (im.height/3),'src': (im.src)});
img.appendTo(imgTd);
});

这样就能在第一次图片加载完成后就可以获取到图片的高宽