【移動應(yīng)用開發(fā)技術(shù)】微信小程序中圖片等比例縮放的示例分析

【移動應(yīng)用開發(fā)技術(shù)】微信小程序中圖片等比例縮放的示例分析

這篇文章主要介紹了微信小程序中圖片等比例縮放的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。微信小程序圖片等比例縮放1.圖片高寬比小于屏幕高寬比2.圖片高寬比大于屏幕高寬比3.這種其實也是圖片高寬比小于屏幕高寬比,但是高寬都大于屏幕高寬.所以不能簡單用高寬來判斷,應(yīng)該是用高寬比判斷后做縮放.上代碼:1.index.wxml<!--index.wxml-->

<!--圖片寬大于屏幕寬-->

<image

style="width:

{{imagewidth}}px;

height:

{{imageheight}}px;"

src="{{imagefirstsrc}}"

bindload="imageLoad"></image>

<!--圖片高大于屏幕高-->

<!--<image

style="width:

{{imagewidth}}px;

height:

{{imageheight}}px;"

src="{{imagesecondsrc}}"

bindload="imageLoad"></image>-->

<!--圖片寬高大于屏幕寬高-->

<!--<image

style="width:

{{imagewidth}}px;

height:

{{imageheight}}px;"

src="{{imagethirdsrc}}"

bindload="imageLoad"></image>-->2.index.js//index.js

//獲取應(yīng)用實例

var

imageUtil

=

require('../../utils/util.js');

var

app

=

getApp()

Page({

data:

{

imagefirstsrc:

'/back_pic/00/03/85/1656205138bbe2d.png',//圖片鏈接

imagesecondsrc:

'/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//圖片鏈接

imagethirdsrc:'/ent/pics/hv1/13/71/2061/134034643.jpg',

imagewidth:

0,//縮放后的寬

imageheight:

0,//縮放后的高

},

onLoad:

function

()

{

},

imageLoad:

function

(e)

{

var

imageSize

=

imageUtil.imageUtil(e)

this.setData({

imagewidth:

imageSize.imageWidth,

imageheight:

imageSize.imageHeight

})

}

})3.util.js//util.js

function

imageUtil(e)

{

var

imageSize

=

{};

var

originalWidth

=

e.detail.width;//圖片原始寬

var

originalHeight

=

e.detail.height;//圖片原始高

var

originalScale

=

originalHeight/originalWidth;//圖片高寬比

console.log('originalWidth:

'

+

originalWidth)

console.log('originalHeight:

'

+

originalHeight)

//獲取屏幕寬高

wx.getSystemInfo({

success:

function

(res)

{

var

windowWidth

=

res.windowWidth;

var

windowHeight

=

res.windowHeight;

var

windowscale

=

windowHeight/windowWidth;//屏幕高寬比

console.log('windowWidth:

'

+

windowWidth)

console.log('windowHeight:

'

+

windowHeight)

if(originalScale

<

windowscale){//圖片高寬比小于屏幕高寬比

//圖片縮放后的寬為屏幕寬

imageSize.imageWidth

=

windowWidth;

imageSize.imageHeight

=

(windowWidth

*

originalHeight)

/

originalWidth;

}else{//圖片高寬比大于屏幕高寬比

//圖片縮放后的高為屏幕高

imageSize.imageHeight

=

windowHeight;

imageSize.imageWidth

=

(windowHeight

*

originalWidth)

/

originalHeight;

}

}

})

console.log('縮放后的寬:

'

+

imageSize.imageWidt