如何在 Reactjs 中创建图像对象

Posted 2023-03-16

【中文标题】如何在 Reactjs 中创建图像对象

【英文标题】：How to create object of image in Reactjs

【发布时间】：2021-09-27 10:02:07

【问题描述】：

我想在加载之前获取图像的渲染高度和宽度，所以我创建了一个图像对象并尝试通过 onload 方法获取高度和宽度。

下面是我的代码sn-p：

var imgUrl = "https://www.sammobile.com/wp-content/uploads/2019/03/keyguard_default_wallpaper_green-405x405.png";
var imgHeight = 0;
var imgWidth = 0;
var Im = new Image();
Im.src = imgUrl;
Im.onload = () => (imgHeight = Im.height);

但我在创建图像对象时遇到错误。

图像不是构造函数

我该如何调查？

【参考方案1】：

我没有足够的积分来评论，但你的sn-p没有错。

检查了browser compatibility，非常好。

由于某种原因，您没有此 API，可能值得检查您的捆绑器以获取答案。

【参考方案2】：

正如@mstrk 所指出的，您的脚本没有任何问题，但是，如果您的运行时（您的浏览器）不知如何通过new Image() 构建图像，您可以通过

document.createElement('img')

这是加载图像时控制台中的 sn-p 打印宽度/高度

var imgUrl = "https://www.sammobile.com/wp-content/uploads/2019/03/keyguard_default_wallpaper_green-405x405.png";
var imgHeight = 0;
var imgWidth = 0;
var Im = document.createElement('img');
Im.src = imgUrl;
Im.onload = () => 
  imgHeight = Im.height;
  imgWidth = Im.width;
  console.log(imgWidth, imgHeight);

【讨论】：

成功了，谢谢兄弟，但它给了我图像的原始高度和宽度，我想获得渲染图像分辨率（纵横比）。有可能吗？

不确定原始宽度/高度（零？）是什么意思。可能是您试图在 onload 发生之前阅读它们。我用代码示例更新了答案。