vue获取图片原始宽高及渲染宽高

最新推荐文章于 2025-06-17 15:48:08 发布

原创最新推荐文章于 2025-06-17 15:48:08 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

代码集合专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在前端开发中获取图片原始及渲染后尺寸的方法。通过使用 Vue 的 ref 和 @load 事件监听，开发者能够轻松地获取到图片的宽度和高度信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="imgBox" ref="imgBox">
	<img src="../../assets/images/current.jpg" ref="urlInfo" @load="urlInfo" />
</div>

//原始宽高
this.$refs.urlInfo.naturalWidth;
this.$refs.urlInfo.naturalHeight;

//渲染宽高(涉及加载问题后面补充，可以使用@load获取)
this.$refs.urlInfo.offsetWidth;
this.$refs.urlInfo.offsetHeight;

methods: {
   //@load获取渲染的宽高
   urlInfo(e) {
     console.log(e.target.width);
     console.log(e.target.height);
   },
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

瘦瘦瘦瘦不了

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue获取屏幕的实时宽度 / 高度

南七小僧的学海无涯

08-26

1571

获取屏幕的宽度和高度适用于。

vue iframe 宽高自适应

最新发布

liora6的博客

06-17

259

通用的 image-utils.ts 工具文件，适用于 TypeScript + Vue 项目，提供两种图片尺寸获取方式：通过 URL 获取图片宽高：支持跨域图片（需后端允许），使用 getImageSizeFromUrl(url) 方法，返回 Promise 包含图片的 naturalWidth 和 naturalHeight。通过 File 对象获取宽高：适用于上传图片场景，使用 getImageSizeFromFile(file) 方法，通过 FileReader 转换为 DataURL

【Vue实用功能】Vue获取URL图片的宽高

weixin_44590591的博客

05-19

7074

Vue获取URL图片的宽高方法1：函数类型 datadragEnd() { // 创建实例对象 var img = new Image(); // 图片地址 img.src = "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/19/G0JSVphpS2MItH1652924237220519.jpg"; let res = {} img.onload = function () { res = { w

Vue页面已经渲染完图片再获取图片的宽高

weixin_38694789的博客

05-21

2107

<el-image :src="item.filePath" ref="imgSize" @onload="imgload"></el-image> <span >{{item.imageWidth }}*{{item.imageHeight }}</span> //展示图片的宽高 //js // 获取图片宽高,再把宽高值插入原来的数组 this.imgload() 这个方法在页面图片渲染完后调用 imgload(){ console.log('.

vue 如何获取图片的原图尺寸_vue : 检测用户上传的图片的宽高

weixin_34708601的博客

12-28

2496

需求：用户可上传3-6张图片(第 1 2 3 张必须传)，上传的图片必须是540 * 330 像素。第一步，获取上传的图片的宽高。初始化一个对象数组，宽高均设为0。如果用户上传的图片没有上限，可以动态修改这个对象数组。data:picArray:[{width:0,height:0},{width:0,height:0},{width:0,height:0},{width:0,height:0},...

vue项目利用elementui 上传视频获取视频的宽高大小等信息

TVM的博客

12-01

5319

1.饿了么的上传组件 <el-upload>,监听他的变化on-change <el-upload :on-change="uploadVideoChange" > <el-button size="small" type="primary"> <i class="el-icon-upload" /&...

Vue - 获取当前浏览器屏幕宽高（document Object）

资深程序员

05-24

4569

前言有时候，我们需要获取浏览器当前尺寸的宽高。解决方案原生 document 对象上，就有这些数据。 // 宽度: document.body.clientWidth // 高度: document.body.clientHeight data() { // 可直接挂载到data数据上 return { Width: document.body.clientWidth, Height: document.body.clientHeight, } }

vue 获取图片宽高

weixin_44606457的博客

04-01

1194

// url是本地图片地址或者线上图片地址: 本地：blob:http://localhost:8080/d854a38b-275b-4c36-b65d-be705a2458e7 getImageSize(url) { return new Promise((resolve) => { var img = document.createElement("img"); img.src = url;

vue 检测用户上传图片宽高的方法

10-15

主要介绍了vue 检测用户上传图片宽高的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue计算图片比例（宽高比）

伍六七

06-26

504

【代码】vue计算图片比例（宽高比）

Vue获取file图片的宽高

别浪

03-16

1874

文件读取之reader.onload中的定义的变量在其函数外部进行处理

vue获取上传图片的宽度

爱意迷了眼丶的博客

06-24

477

【代码】vue获取上传图片的宽度。

在 Vue 3 中获取图片元素的宽高：原始尺寸与缩放后尺寸的处理方法

weixin_58462329的博客

12-09

959

方法，该方法返回元素的大小及其相对于视口的位置，包括应用的 CSS 变换。属性仍然返回未缩放前的尺寸。为了获取缩放后的实际显示尺寸，可以使用。// 获取初始显示尺寸。

android bitmap转jpg_Android 利用 Glide 获取图片的实际尺寸

weixin_36397146的博客

12-27

536

最近有个群友提了一个挺有意思的问题，当使用 Glide 加载图片时，假如不设置 ImageView 的宽高，会出现显示不可控的情况。什么意思呢？我们来复现一下他的情况。这位群友为我们提供了一张表情包图片：要不是我们是正儿八经的学术讨论群，可能这位群友已经被锤死了…当然，这个表情包是使用一个 URL 提供的，实际上只是相当于模拟从后端获取图片时的场景，因为一般这种情况后端是不会特意将图片尺...

vue3获取接口返回的图片的宽高

qq_41697998的博客

12-14

2346

vue3获取接口返回的图片的宽高

使用Vue获取URL图片的宽高

Zan_Z的博客

12-25

2283

//拖拽图片顺序事件 datadragEnd: function () { var that = this; var img = new Image(); // 改变图片的src img.src = this.model.data.list[0].picurl_cdn;...