如何找到base64图像的宽度和高度

vvr*_*r02 15 html javascript jquery

如何找到base64图像的宽度和高度

<img id="thumb0" width="200" height="200" 
src="data:image/png;base64, ................">
Run Code Online (Sandbox Code Playgroud)

图像属性宽度和高度是不变的,因为我需要将它们显示为缩略图,但原始图像属性不同.

我需要获得原始图像的高度和宽度.

假设我的原始图像高度和宽度为750 X 500

我试过这样但得到了属性的宽度和高度

$("#thumb0").width();
Run Code Online (Sandbox Code Playgroud)

价值是200.

请帮助如何获得图像的原始宽度和高度.

Den*_*ret 17

您可以构建另一个图像元素并获取其大小:

var img = new Image();
img.src = $('#thumb0').attr('src');
var originalWidth = img.width;
Run Code Online (Sandbox Code Playgroud)

  • 但我认为它需要花时间拍摄巨大的图像,我们需要在创建后销毁? (3认同)

小智 7

该图片()构造函数HTMLImageElements在dystroy的答复中提到是正确的道路要走,但有一点需要注意:构造函数实际上是异步的!因此,您可能会在某些浏览器中遇到意外行为; 根据我的有限实验,dystroy的代码将在Chrome中100%有效,但有时仅在Firefox和Safari中有效.不了解别人.

正确的方法似乎是使用onload处理程序,如:

var img = new Image();
img.src = some_base64_image_source;
console.log(img.width);       // This might print out 0!
img.onload = function() {
    console.log(img.width);   // This will print out the width.
}
Run Code Online (Sandbox Code Playgroud)