首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

for循环创建Image(),但获取宽度和高度失败

for循环创建Image(),但获取宽度和高度失败是因为在循环中创建的Image对象还没有加载完成,所以无法立即获取到宽度和高度信息。这是因为Image对象的加载是异步的过程,需要等待图片加载完成后才能获取到宽度和高度。

解决这个问题的方法是使用回调函数或Promise来确保在获取宽度和高度之前等待图片加载完成。以下是一个示例代码:

代码语言:javascript
复制
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      resolve(img);
    };
    img.onerror = function() {
      reject(new Error('Failed to load image'));
    };
    img.src = url;
  });
}

async function getImageSize(url) {
  try {
    const img = await loadImage(url);
    const width = img.width;
    const height = img.height;
    console.log('Width:', width);
    console.log('Height:', height);
  } catch (error) {
    console.error(error);
  }
}

// 使用示例
for (let i = 0; i < 10; i++) {
  const imageUrl = `https://example.com/image${i}.jpg`;
  getImageSize(imageUrl);
}

在上述代码中,loadImage函数返回一个Promise对象,当图片加载成功时,Promise会被resolve,并将加载完成的Image对象作为参数传递给resolve函数。如果加载失败,则Promise会被reject,并传递一个错误对象。

getImageSize函数使用async/await语法来等待图片加载完成,并获取宽度和高度信息。在循环中调用getImageSize函数来获取每个图片的宽度和高度。

这样,通过使用Promise和async/await,我们可以确保在获取宽度和高度之前等待图片加载完成,从而解决获取宽度和高度失败的问题。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JavaScript、Jquery获取屏幕的宽度高度

    在日常的项目中经常需要获取屏幕的宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight...window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取: ($(window).height()); //浏览器当前窗口可视区域高度 ($(document)....height()); //浏览器当前窗口文档的高度 ($(document.body).height());//浏览器当前窗口文档body的高度 ($(document.body).outerHeight...(true));//浏览器当前窗口文档body的总高度 包括border padding margin ($(window).width()); //浏览器当前窗口可视区域宽度 ($(document)....width());//浏览器当前窗口文档对象宽度 ($(document.body).width());//浏览器当前窗口文档body的宽度 ($(document.body).outerWidth(

    5.3K00

    如何在onCreate中获取View的高度宽度

    如何在onCreate中获取View的高度宽度 在开发过程中经常需要获取到View的宽和高,可以通过View.getWidth()View.getHeight()来得到宽高。...只有经过“测量”“布局”之后,View才能正确地完成绘制。而这一切是发生在onCreate方法之后的。...所以在onCreate中直接使用View.getWidth()View.getHeight()是无法得到正确的值的。 那应该怎么onCreate中获取View的宽高呢?...开发者可以通过View.post()方法来获取到View的宽高,该方法传递一个Runnable参数,然后将其添加到消息队列中,最后在UI线程中执行。...savedInstanceState); view.post(new Runnable(){ public void run(){ //在这里使用View.getWidth()View.getHeight

    5.3K20

    js 获取浏览器高度宽度值(多浏览器)

    ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度...clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth

    10.4K60

    js 获取浏览器高度宽度值(多浏览器)

    => BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度...==> 页面对象高度(即BODY对象高度加上Margin高) Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上...,offsetWidth scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    7.6K80

    js 获取浏览器高度宽度值(多浏览器)

    ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)...==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)...,offsetWidth scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    5.6K10

    【Android 内存优化】Android 工程中使用 libjpeg-turbo 压缩图片 ( 初始化压缩对象 | 打开文件 | 设置压缩参数 | 写入压缩图像数据 | 完成压缩 | 释放资源 )

    | 获取图像数据 | 图像数据过滤 | 释放资源 ) 介绍了从 Java 层传入 Bitmap 对象到 JNI 层 , JNI 层获取到了图像对应的 RGB 像素数据 , 本篇博客中将获取的图像数据进行压缩...设置默认参数 : 图片宽度 : cinfo.image_width ; 像素宽度 ; 图片高度 : cinfo.image_height ; 像素高度 ; 像素组件 : cinfo.input_components...cinfo.image_width = imageWidth; // 设置图片的高度 cinfo.image_height = imageHeight; // 设置每个像素的颜色组件...设置压缩参数 // 下面的四个参数是必须设置的参数 // 设置图片的宽度 cinfo.image_width = imageWidth; // 设置图片的高度...循环写入数据 /* 循环原理 : 使用函数库的状态变量, cinfo.next_scanline 作为循环控制变量 * 这样就可以不同自己实现循环控制 * 为了保持简单,

    1.9K20

    小程序canvas生成海报图片压缩失真问题解决

    height = width; // canvas画布为正方形 size.w = width size.h = height } catch (e) { console.log("获取设备信息失败..." + e) } return size }, 复制代码 绘制背景图 动态设置图片的高度宽度 在小程序布局中,如果图片不是固定高度高度image设置的是固定的高度宽度,这时候原始图片相对...image设置的固定高度宽度不是等比例大小,那么这张图片就会变形,变的不清晰。...或者通过image的bindload方法动态的获取图片的高度宽度,动态的设置图片的高度宽度,是图片布局的高度宽度原始图片的高度宽度相等。...Util' Page({ data:{ imageWidth:0, imageHeight:0 }, imageLoad: function (e) { //获取图片的原始宽度高度

    2K21

    (译)SDL编程入门(10)Color Key

    它有一个构造函数/析构函数对,一个文件加载器,一个deallocator,一个接收位置的渲染器,以及获取纹理尺寸的函数。对于成员变量,它有我们要包裹的纹理,以及存储宽度/高度的变量。...= NULL; } 纹理加载功能的工作原理之前的纹理加载课程中的差不多,做了一些小的重要的调整。首先,我们对纹理进行重新分配,以防有一个已经加载的纹理。...在对加载的表面进行颜色键控后,我们从加载颜色键控的表面创建一个纹理。如果纹理创建成功,我们存储纹理的宽度/高度,并返回纹理是否加载成功。...当渲染某个地方的纹理时,你需要指定一个目标矩形,设置x/y位置宽度/高度。在不知道原始图像的尺寸的情况下,我们无法指定宽度/高度。...所以这里当我们渲染纹理时,我们用位置参数成员宽度/高度创建一个矩形,并将这个矩形传入SDL_RenderCopy。

    1.1K20

    【小白必看】Python图片合成示例之使用PIL库实现多张图片按行列合成

    该代码使用了PIL库来处理图片文件,并通过嵌套循环将多张图片按照指定的行数列数进行合成。最终生成的合成图片保存在本地。 效果图 1....然后使用.size属性获取图片的宽度高度,并分别赋值给变量wh。 3....创建新的画布 new_img = Image.new('RGB', (image_column * w, image_row * h)) 使用Image.new()函数创建一个新的画布,指定画布的模式为...RGB(彩色图像),大小为生成图片的行数乘以每张图片的高度列数乘以每张图片的宽度。...整个代码的功能是将指定目录下的多张图片按照指定的行数列数进行合成,并保存为一张新的图片。合成的图片大小为每张图片的宽度乘以列数每张图片的高度乘以行数。

    1.3K10

    EasyX图形库学习(三、用easyX实现移动的小球、图片-加载、输出)

    x坐标 y 绘制位置的y坐标 w 绘制的宽度 h 绘制的高度 srcImg 要绘制的IMAGE srcx 绘制内容在 IMAGE 对象中的左上角 x 坐标 srcy...// 图片的拉伸宽度 int nHeight = 0, // 图片的拉伸高度 bool bResize = false // 是否调整 IMAGE 的大小以适应图片...IMAGE 的大小以适应图片 ); 加载图像 pImg 保存图像的IMAGE对象指针 imgFile 图像文件名 w 图片的拉伸宽度,默认为0,表示使用原图像的宽度 h 图片的拉伸高度...在主循环中,我们创建了两个按钮:“Start Game”“End Game”。当它们被点击时,程序会打印相应的消息。...int main() { playBackgroundMusic("assets/斗地主.mp3", true); //创建一个图形窗口 宽度*高度 initgraph(640, 480,

    35310
    领券