登录  /  注册

微信小程序中处理图片遇到的问题小结

高洛峰
发布: 2017-03-17 14:44:29
原创
2557人浏览过

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

203449iysf7ssojoayayzz.jpg

图片等比例缩放工具   

//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;
登录后复制

使用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});    
  } 
})
登录后复制

以上就是微信小程序中处理图片遇到的问题小结的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号