JavaScript实现获取img的原始尺寸的方法详解
在前端开发中我们几乎不需要获取img的原始尺寸，因为只要你不刻意设置图片的宽高它都会按照最佳比例渲染。但是在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置。
微信小程序获取image原始尺寸的方法
<view style="width:100%;" >
<image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</view>
//js
Page({
data: {
imageHeight: 0,
imageWidth: 0
},
loadSuccess(e){
const { detail: {width, height} } = e // // 这里获取到的就是图片原始尺寸
this.setData({
imageWidth: width,
imageHeight:height
})
}
})
wx.getImageInfo
方法是wx.getImageInfo，微信官方文档 这个需要添加业务域名，服务端做接口验证。比较繁琐不推荐。
浏览器中获取图片尺寸的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img原始尺寸获取</title>
<style>
.image {
/* height: 20px; 这种写法没什么卵用 */
}
</style>
</head>
<body>
<img class="image" referrerpolicy="no-referrer" src="https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732"
style="width: 300px;">
<script>
// 1. 获取DOM元素的渲染尺寸
const img = document.querySelector('.image');
console.log(img.style.width) // 300px 获取到字符串
console.log(img.style.height) // 如果在标签行内样式没有设置 无法获取到
// 2. 直接获取DOM元素的width和height属性
console.log(img.width) // 300 获取到的数字类型
console.log(img.height) // 533 可以获取到元素的渲染高度
// 3. naturalWidth / naturalHeight (适用于Firefox/IE9/Safari/Chrome/Opera浏览器)
console.log('naturalWidth:', img.naturalWidth) // naturalWidth: 412
console.log('naturalHeight:', img.naturalHeight) // naturalHeight: 732
// 4. 使用Image()对象异步获取图片原始尺寸
function getImageInfo(url) {
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => {
resolve({
width: image.width,
height: image.height
})
}
image.onerror = () => {
reject(new Error('image load error'))
}
image.src = url;
})
}
(async () => {
let size = await getImageInfo('https://image-static.segmentfault.com/193/916/1939169050-641cff9f16cdc_fix732')
console.log(size) // {width: 412, height: 732}
})()
// 终极兼容写法 （首先检测浏览器是否支持img.naturalWidth，如果支持直接获取，不支持使用4.Image()对象获取）
async function getImageSize(img) {
if (img.naturalWidth) {
return {
width: img.naturalWidth,
height: img.naturalHeight
}
} else {
return await getImageInfo(img.src)
}
}
</script>
</body>
</html>
到此这篇关于JavaScript实现获取img的原始尺寸的方法详解的文章就介绍到这了,更多相关JavaScript获取img原始尺寸内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
package.json的版本号更新优化方法
目录 引言 node.js 部分,我们得有一个更改仓库代码的脚步留给ci执行 CI :如何让发布包的行为直接和代码仓库中的版本号同步? 你可能遇到最多的坑 可以优化的地方 可以再优化的地方 引言 本文的起因是有在代码仓库发包后,同事问我“为什么package.json 里的版本还是原来的,有没有更新?”,这个时候我意识到,我们完全没有必要在每次发布的时候还特意去关注这个仓库的版本号,只要在发布打tag的时候同步一下即可,于是有了本文的实践. node.js 部分,我们得有一个更改仓库代码的脚步留
-
JS前端的内存处理的方法全面详解
目录 一.内存的储存和代码执行的场所关系 1. 储存空间 2. 内存的生命周期 3. js 中的内存分配和使用 4. 调用栈下移ESP(记录当前执行状态的指针) 二. js中的垃圾回收机制 1. 引用计数法 2. 标记清除法(Mark-Sweep) 三.代际假说和分代收集 新生代(副垃圾回收器) 老生代(主垃圾回收器) 四.常见的内存泄漏 1. 全局变量 2. 未被清理的定时器和回调函数 3. 闭包 5. DOM 引用 6. 怎么避免呢? 一.内存的储存和代码执行的场所关系 对于任何语言来说,内
-
js多维数组降维的5种方法
目录 一,递归 二,将多维数组转为字符串,再转化为一维数组 三,利用数组的方法 四.利用contact 五.利用扩展运算符 多维数组降维也就是数组扁平化 数组扁平化的方法有很多种,但是我主要用五种,如下: 一,递归 // 一,递归 let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]] let newArr = [] const getArr=(array)=>{ array.forEach((item)=>{
-
JavaScript简单获取页面图片原始尺寸的方法
本文实例讲述了JavaScript简单获取页面图片原始尺寸的方法.分享给大家供大家参考,具体如下: 这里通过Image()对象获取原始宽高 这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取. var img = new Image(); img.src = $("#target").attr("src"); if(img.complete){ alert('width:'+img.width+',height'+img.
-
JavaScript动画实例之粒子文本的实现方法详解
1．粒子文本的实现原理 粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子. 先在canvas1中用如下的语句绘制待显示的文本. ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canva
-
JavaScript实现网页带动画返回顶部的方法详解
服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=
-
获取Django项目的全部url方法详解
在为一个项目添加权限时,遇到一个问题,就是为项目所有的url设置权限,但是一个一个手动输入太麻烦了,所以考虑用代码获取到一个项目所有的url 首先,考虑到项目最外层的urlpartterns,因为所有的url都要通过这里 urlpatterns = [ # url(r'^admin/', admin.site.urls), url(r'^arya/', site.urls), url(r'^index/', index), ] 先循环打印一下这个列表,看一下拿到的结果: <RegexURLRes
-
vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调
-
Python获取网络时间戳的两种方法详解
目录 方法一 代码实现 调用方法 返回结果 方法二 代码实现 调用方法 返回结果 在我们进行注册码的有效期验证时,通常使用获取网络时间的方式来进行比对. 以下为获取网络时间的几种方式. 方法一 需要的时间会比较长,个别电脑上可能会出现不兼容现象 代码实现 def get_web_server_time(self, host_URL, year_str='-', time_str=':'): ''' 获取网络时间,需要的时间会比较长,个别电脑上可能会出现不兼容现象 :param host_URL:
-
JavaScript实现生成动态表格和动态效果的方法详解
今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">
-
JavaScript中数组去重常用的五种方法详解
目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返
-
JS实现获取GIF总帧数的方法详解
目录 前言 写在前面 思路分析 什么是Gif 组成结构 解析原理 数据块分析 Header Block Logical Screen Descriptor Global Color Table Graphics Control Extension Image Descriptor Image Data 实现代码 测试用例 插件地址 前言 有一个Gif图片,我们想要获取它的总帧数,超过一定帧数的图片告知用户不可上传,在服务端有很多现成的库可以使用,这种做法不是很友好,前端需要先将gif上传至服务端
-
Golang反射获取变量类型和值的方法详解
目录 1. 什么是反射 2. reflect.Type 2.1 类型Type和种类Kind 2.2 引用指向元素的类型 2.3 结构体成员类型 3. reflect.Value 3.1 结构体的成员的值 3.2 遍历array.slice 3.3 遍历map 4. 反射的三大定律 4.1 从interface到反射对象 4.2 从反射对象到interface 4.3 通过反射修改对象,该对象值必须是可修改的 1. 什么是反射 反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. G