在小程序的開發過程中，頁面布局中，我們經常會遇到一些圖片處理的問題，比如，如果圖片不是固定高度和高度，但image設置的是固定的高度和寬度，這時候原始圖片相對image設置的固定高度和寬度不是等比例大小，那么這張圖片就會變形，變的不清晰。這時就可以使用下面的等比例縮放的方式縮放圖片，讓圖片不變形。或者通過image的bindload方法動態的獲取圖片的高度和寬度，動態的設置圖片的高度和寬度，是圖片布局的高度和寬度和原始圖片的高度和寬度相等。

1.圖片等比例縮放工具

[AppleScript]//Util.js

class Util{

/***

* 按照顯示圖片的寬等比例縮放得到顯示圖片的高

* @params originalWidth 原始圖片的寬

* @params originalHeight 原始圖片的高

* @params imageWidth 顯示圖片的寬，如果不傳就使用屏幕的寬

* 返回圖片的寬高對象

***/

static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){

let imageSize = {};

if(imageWidth){

imageSize.imageWidth = imageWidth;

imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;

}else{//如果沒有傳imageWidth,使用屏幕的寬

wx.getSystemInfo({

success: function (res) {

imageWidth = res.windowWidth;

imageSize.imageWidth = imageWidth;

imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;

}

});

}

return imageSize;

}

/***

* 按照顯示圖片的高等比例縮放得到顯示圖片的寬

* @params originalWidth 原始圖片的寬

* @params originalHeight 原始圖片的高

* @params imageHeight 顯示圖片的高，如果不傳就使用屏幕的高

* 返回圖片的寬高對象

***/

static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){

let imageSize = {};

if(imageHeight){

imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;

imageSize.imageHeight = imageHeight;

}else{//如果沒有傳imageHeight,使用屏幕的高

wx.getSystemInfo({

success: function (res) {

imageHeight = res.windowHeight;

imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;

imageSize.imageHeight = imageHeight;

}

});

}

return imageSize;

}

}

export default Util;

2.使用image組件加載圖片，通過bindload動態的獲取圖片的高度和寬度，動態的設置圖片的高度和寬度

[AppleScript]

index.js代碼如下

[AppleScript]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});

}

})

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的微信小程序图片删除php,关于微信小程序中图片处理的问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。