WeChat 미니 프로그램의 이미지 처리 관련 문제 요약-미니 프로그램 개발-php.cn

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

巴扎黑

풀어 주다： 2017-05-21 19:04:31

원래의

2855명이 탐색했습니다.

요약: 작은 프로그램 및 페이지 레이아웃 개발 과정에서 이미지 처리 문제가 자주 발생합니다. 예를 들어 이미지의 높이와 높이가 고정되어 있지 않은데 이미지 설정이 고정되어 있는 경우입니다. 원본 이미지의 높이와 너비는 이미지에서 설정한 고정된 높이와 너비에 비례하지 않습니다. 그러면 이...

작은 프로그램 및 페이지 레이아웃 개발 과정에서 일부 이미지 처리 문제가 자주 발생합니다. 예를 들어, 이미지에 고정된 높이와 높이가 없지만 이미지가 고정된 높이와 너비로 설정된 경우 원본 이미지가 이미지에서 설정한 고정된 높이와 너비에 비례하지 않고 이미지가 변형되어 불분명해집니다. 이때, 다음과 같은 비례 스케일링 방식을 이용하면 이미지가 변형되지 않도록 스케일을 조정할 수 있습니다. 또는 이미지의 바인드로드 방식을 통해 이미지의 높이와 너비를 동적으로 구하고, 이미지 레이아웃의 높이와 너비가 원본 이미지의 높이와 너비와 동일하도록 이미지의 높이와 너비를 동적으로 설정합니다.

在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。

1.图片等比例缩放工具

//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动态的获取图片的高度和宽度，动态的设置图片的高度和宽度

<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>

로그인 후 복사

index.js代码如下

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

로그인 후 복사