작은 프로그램 및 페이지 레이아웃 개발 과정에서 이미지 처리 문제가 자주 발생합니다. 예를 들어 이미지의 높이와 높이가 고정되어 있지 않은데 이미지가 고정되어 있는 경우입니다. 이때 원본 사진은 이미지에서 설정한 고정된 높이와 너비에 비례하지 않으므로 사진이 변형되고 불분명해집니다. 이때, 다음과 같은 비례 스케일링 방식을 이용하면 이미지가 변형되지 않도록 스케일을 조정할 수 있습니다. 또는 이미지의 바인드로드 방식을 통해 이미지의 높이와 너비를 동적으로 구하고, 이미지 레이아웃의 높이와 너비가 원본 이미지의 높이와 너비와 동일하도록 이미지의 높이와 너비를 동적으로 설정합니다.
1. 이미지 크기 조정 도구
[AppleScript] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
class Util{
static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
let imageSize = {};
if (imageWidth){
imageSize.imageWidth = imageWidth;
imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
} else {
wx.getSystemInfo({
success: function (res) {
imageWidth = res.windowWidth;
imageSize.imageWidth = imageWidth;
imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
}
});
}
return imageSize;
}
static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){
let imageSize = {};
if (imageHeight){
imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
imageSize.imageHeight = imageHeight;
} else {
wx.getSystemInfo({
success: function (res) {
imageHeight = res.windowHeight;
imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
imageSize.imageHeight = imageHeight;
}
});
}
return imageSize;
}
}
export default Util;
|
로그인 후 복사
2. 이미지 컴포넌트를 사용하여 이미지를 로드하고, 바인드로드를 통해 이미지의 높이와 너비를 동적으로 가져오고, 높이와 너비를 동적으로 설정합니다.
[AppleScript] 일반 텍스트 보기 코드 복사
1 | <image bindload= "imageLoad" style= "width:{{imageWidth}}px;;height:{{imageHeight}}px;" src= "../pro.png" />
|
로그인 후 복사
index.js 코드는 다음과 같습니다. 팔로우
[AppleScript] 일반 텍스트 보기 코드 복사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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.imageZoomWidthUtil(originalWidth,originalHeight,145);
this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});
}
})
|
로그인 후 복사
위 내용은 WeChat 미니 프로그램 개발 중 이미지 처리 관련 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!