关于微信小程序中图片处理的问题汇总

互联网 17-5-21

摘要: 在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这 ...

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 '../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});        }    })

以上就是关于微信小程序中图片处理的问题汇总的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：微信小程序中关于图片处理的的一些问题