商城系統(tǒng) 注冊

小程序獲取圖片寬高的方法

2020-09-27|HiShop
導(dǎo)讀：小程序如果不能獲取圖片寬高，那么圖片設(shè)置寬高時，就有可能會出現(xiàn)圖片變形，要想避免這種情況，除了圖片等比例縮放，還可以用image組件加載圖片，通過bindload動態(tài)的獲取圖片的高...

　　小程序獲取圖片寬高的方法

　　小程序如果不能獲取圖片寬高，那么圖片設(shè)置寬高時，就有可能會出現(xiàn)圖片變形，要想避免這種情況，除了圖片等比例縮放，還可以用image組件加載圖片，通過bindload動態(tài)的獲取圖片的高度和寬度，下面是方法：

　　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});  
  }
}) 

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://zytcm.com.cn/xiaocx/kaifa.html

小程序顯示圖片相關(guān)文章：

小程序加載圖片如何實現(xiàn)

小程序開發(fā)上傳圖片如何實現(xiàn)

小程序上傳圖片組件及上傳多張圖片
電話咨詢 預(yù)約演示 0元開店