> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 미니 프로그램의 이미지 처리 관련 문제 요약

WeChat 미니 프로그램의 이미지 처리 관련 문제 요약

高洛峰
풀어 주다: 2018-05-16 16:50:13
원래의
8110명이 탐색했습니다.

미니 프로그램 개발 과정에서 페이지 레이아웃에서 그림 처리 문제가 자주 발생합니다. 고정된 높이와 높이가 아니지만 이미지가 고정된 높이와 너비로 설정되어 있습니다. 이때 원본 이미지는 이미지에서 설정한 고정된 높이와 너비에 비례하지 않으므로 이미지가 변형되고 불분명해집니다. 이때, 다음과 같은 비례 스케일링 방식을 이용하면 이미지가 변형되지 않도록 스케일을 조정할 수 있습니다. 또는 이미지의 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. 이미지 컴포넌트를 사용하여 이미지를 로드하고, 바인드로드를 통해 이미지의 높이와 너비를 동적으로 가져오고, 이미지의 높이와 너비를 동적으로 설정합니다

[AppleScript]

<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>
로그인 후 복사

index.js 코드는 다음과 같습니다

[AppleScript]

import Util from &#39;../common/Util&#39;;  
  
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});    
  }  
})
로그인 후 복사

위 내용은 WeChat 미니 프로그램의 이미지 처리 관련 문제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿