取得图像尺寸并将其应用于其他图像

时间:2018-06-21 14:42:15

标签: javascript

问题:我有2张图像,其中一张是使用src=data:image;base64,$row[2]从我的数据库中拍摄的,并且具有给定的尺寸。

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

我的主意:我想将getMeta输出保存为2个变量的宽度和高度,稍后将代替'200px'使用。

您是否相信有比此代码更聪明的方法? 否则,我该怎么做才能保存getMeta输出并使用它而不是200px?

  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';
}

1 个答案:

答案 0 :(得分:0)

如果要使用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);
    }
);