html – 我们可以通过画布获得真实的图像大小吗？

发布时间：2020-12-14 23:01:24 所属栏目：资源来源：网络整理

导读：在图像标记中,如果我们不提供width和height属性,则在检索图像的宽度和高度时将得不到任何结果.我使用canvas元素加载图像并按比例缩放.为了做到这一点,我必须得到实际的图像大小.是否有可能在html 5中这样做？最佳答案 HTMLImageElement有两个属性,naturalWi

在图像标记中,如果我们不提供width和height属性,则在检索图像的宽度和高度时将得不到任何结果.我使用canvas元素加载图像并按比例缩放.为了做到这一点,我必须得到实际的图像大小.是否有可能在html 5中这样做？

最佳答案

HTMLImageElement有两个属性,naturalWidth和naturalHeight.使用那些.

如：

var img = new Image();

img.addEventListener('load',function() {
  // once the image is loaded:
  var width = img.naturalWidth; // this will be 300
  var height = img.naturalHeight; // this will be 400
  someContext.drawImage(img,width,height);
},false);

img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten

在定义事件监听器之后设置源是明智的,请参阅Phrogz在此处的探索：Should setting an image src to data URL be available immediately?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!