获取图像尺寸并将它们应用于另一个图像

Question

问题：我有 2 张图片，其中一张是使用 src=data:image;base64,$row[2] 从我的数据库中获取的，并且已经给出了尺寸。

另一张图片取自带有ID=img00 的HTML 元素，它是一张透明图片。我需要透明图像与从我的数据库中获取的图像具有相同的宽度和高度。

我的猜测：我想将 getMeta 输出保存到宽度和高度的 2 个变量中，稍后我将使用它来代替 '200px'。

你相信有比这段代码更聪明的方法吗？ 否则，我需要做什么来保存 getMeta 输出并使用它而不是 200 像素？

  function getMeta(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}

getMeta(
  "data:image;base64,$row[2]",
  function(width, height) { alert(width + 'px ' + height + 'px') }
);

var img00 = document.getElementById('img00');
if(img00 && img00.style) {
    img00.style.height = '200px';
    img00.style.width = '200px';
}

Answer 1

如果您想使用 getMeta 内部的值，您将不得不更改最后一段代码的执行时间。也许是这样的？

function getMeta(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}

function sizeImg00(w,h){
    var img00 = document.getElementById('img00');
    if(img00 && img00.style) {
        img00.style.height = h + 'px';
        img00.style.width = w + 'px';
    }
}

getMeta(
    "data:image;base64,$row[2]",
    function(width, height) { 
        console.log(width + 'px ' + height + 'px');
        sizeImg00(width, height);
    }
);