JS - 从 base64 代码中获取图像宽度和高度

IT技术 javascript jquery image base64 dimensions
2021-01-25 17:36:11

我有一个 base64 img 编码,你可以在这里找到我怎样才能得到它的高度和宽度?

4个回答
var i = new Image(); 

i.onload = function(){
 alert( i.width+", "+i.height );
};

i.src = imageData; 
@CoenDamen 是的。我也需要同步过程。
2021-03-18 17:36:11
太棒了,检查尺寸需要一半时间,非常感谢!
2021-04-01 17:36:11
我还要补充一点,这里的顺序非常重要。如果您以相反的方式执行此操作(加载之前的 src),您可能会错过该事件。参见:stackoverflow.com/a/2342181/4826740
2021-04-03 17:36:11
你真棒
2021-04-05 17:36:11
太糟糕了,这是一个异步过程。
2021-04-10 17:36:11

对于同步使用,只需将其包装成这样的Promise:

function getImageDimensions(file) {
  return new Promise (function (resolved, rejected) {
    var i = new Image()
    i.onload = function(){
      resolved({w: i.width, h: i.height})
    };
    i.src = file
  })
}

那么您可以使用 await 以同步编码样式获取数据:

var dimensions = await getImageDimensions(file)
尽管如此,它仍然是异步的。只是使用语法糖。
2021-03-27 17:36:11
'naturalWidth' 和 'naturalHeight' 是更好的选择,不是吗?stackoverflow.com/questions/28167137/...
2021-04-07 17:36:11

我发现使用.naturalWidth.naturalHeight获得了最好的结果。

const img = new Image();

img.src = 'https://via.placeholder.com/350x150';

img.onload = function() {
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;

  console.log('imgWidth: ', imgWidth);
  console.log('imgHeight: ', imgHeight);
};

文档:

这仅在现代浏览器中受支持。http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

确切地说,它是图像调整大小之前的原始大小 object-fit
2021-03-26 17:36:11

创建一个隐藏的<img>图像,然后使用 jquery .width() 和 . 高度()

$("body").append("<img id='hiddenImage' src='"+imageData+"' />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:"+width+" height:"+height);

在这里测试: FIDDLE

图像最初不是创建隐藏的。它被创建,然后你得到宽度和高度,然后将其删除。这可能会导致大图像的可见性非常短,在这种情况下,您必须将图像包装在另一个容器中,并使该容器隐藏而不是图像本身。


另一个没有按照 gp. 的 anser 添加到 dom 的小提琴: 这里

猜猜你的意思是,你不需要向 dom 添加任何东西来获得宽度和高度。将修改答案以反映您的建议。
2021-03-30 17:36:11
由于 jsfiddle 的性质,这只是需要的修复,您可以将 onLoad 更改为 onDomReady 来修复初始 0 宽度和高度问题。代码假定您在工作中已加载文档的某处调用此函数。
2021-03-31 17:36:11
var i = new Image(); i.src = imageData; setTimeout(function(){ alert ( "width:"+ i.width+" height:" + i.height ); },100);
2021-04-06 17:36:11