javascript - 为什么createObjectURL构造的图像宽度为0?

标签 javascript

这是我的代码,应该从表单文件输入加载图像,并在图像太大时调整其大小。问题是,当我创建一个新的图像对象并设置其 src 时,其宽度等于零。但是,当我将图像放入 html 中时,它会正确显示。

var image = document.createElement('img');
var image_url = window.URL.createObjectURL(image_data);
image.src = image_url;
console.log('Width: ' + image.width);

-> 宽度:0

最佳答案

当您设置 src 时,图像开始加载,但当您请求宽度时它尚未加载。使用 onload 事件来解决这个问题:

var image = document.createElement('img');
var image_url = "http://domaingang.com/wp-content/uploads/2012/02/example.png"; //window.URL.createObjectURL(image_data);
image.src = image_url;
image.onload = function()
{
  alert(image.width);
}

关于javascript - 为什么createObjectURL构造的图像宽度为0?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25919847/

相关文章:

javascript - 如何公开 json 数据中的图像

javascript - 基本 HTML + JavaScript,警报功能不起作用

javascript - 带有附加参数的 Extjs 分页

javascript - 使用 Webpack 2 和 extract-text-webpack-plugin

javascript - 溢出容器中的 jQuery 可拖动

javascript - 按下 "esc"时退出全屏(使用带有 electron 的 javascript)

javascript - ReactJs:改变状态以响应状态变化

javascript - 不知道cookie的路径是什么?如何找到它?

javascript - × 类型错误 : Cannot set property 'props' of undefined

java - Javascript 警报消息的国际化 (i18n)