小程序获取图片宽高的方法

发布时间：2023-08-13 13:32:48 作者：♈♉♏♎♍ 阅读量：3804

　　

eec9e04ffcc58a4996b1c3d8f932de03.jpg (15.31 KB, 下载次数: 15)

下载附件

小程序获取图片宽高的方法

半小时前 上传

　　小程序如果不能获取图片宽高，那么图片设置宽高时，就有可能会出现图片变形，要想避免这种情况，除了图片等比例缩放，还可以用image组件加载图片，通过bindload动态的获取图片的高度和宽度，下面是方法：

　　index.wxml (../pro.png是本地图片)

<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>

　　index.js

import Util from '../common/Util';

 

Page({

  data:{

        imageWidth:0,

        imageHeight:0

  },

  imageLoad: function (e) {  

        //获取图片的原始宽度和高度

        let originalWidth = e.detail.width;

        let originalHeight = e.detail.height;

        //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);

 

        //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);

        let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);

 

        this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});  

  }

}) 

多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序开发案例，尽在：http://www.duochengxu.comkaifa.html

小程序显示图片相关文章：

小程序加载图片如何实现

小程序开发上传图片如何实现

小程序上传图片组件及上传多张图片

我要评论

置顶通知！发帖请务必遵守法律法规

微信支付下载对账单开发CloudPay.downloadBill()

wx.navigateBack(OBJECT),小程序关闭当前页面返回上一页面（1）

如何制作微信小游戏

微信支付查询退款开发CloudPay.queryRefund()

微信小程序尺寸及外边距设置调整技巧

考古APP开发 感受历史的魅力考古APP开发

安全教育app开发解决方案

门店小程序类目资质表

广州APP开发企业APP制作公司

一招告诉你小程序码怎么生成？

一文告诉你为什么鲜花店老板主动要做小程序?

手机APP传达地震救助信息

企业都希望用移动应用来实现移动办公

企业新营销渠道非APP应用软件莫属

开发餐饮类APP的优势与劣势

APP开发商为了IOS 7开发全新的APP

哪几类APP最受人们欢迎

本地头条新闻APP开发:不用编程,让你一个人顶一个电视台

广州APP开发未来的发展趋势

剖析APP开发跨平台与非跨平台对比

税务app开发 办税无压力税务app开发

微信小程序的制作流程

「体育行业app开发」体育行业app开发谁好？案例跟商业模式