登录  /  注册

微信小程序开发过程中图片失真有什么解决办法?

巴扎黑
发布: 2017-04-30 10:16:40
原创
5063人浏览过

摘要: 很多开发者在微信小程序的开发过程中都可能会遇到图片失真的情况,因为微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域。我们经常会看到如下的图示: 但是宽高设置固定了会导致有些 ...

很多开发者在微信小程序的开发过程中都可能会遇到图片失真的情况,因为微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域。我们经常会看到如下的图示:1015155-20170328215248670-1875414174.png

但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一致而出现失真现象,

为此,想到一个方法,当图片加载成功的时候,会触发bindload事件,通过这个事件我们可以获取到图片的宽高,那么问题就引刃而解了,我们可以把图片原始的宽高获取到,然后算出它的比例,根据需求固定图片的宽(或高),再根据比例来算出相应的高(或宽),原理就是这样,下面放代码:

在utils中创建的一个js文件,暴露其接口imageLoad:


function imageLoad(e,zhi,img,or) {
    var windowWidth=0;
       wx.getSystemInfo({
            success: function(res) {
                console.log(1);
                windowWidth=res.windowWidth;
             }
            })
     var $width=e.detail.width,    //获取图片真实宽度
         $height=e.detail.height,   //获取图片的真实高度
         ratio=$width/$height;   //图片的真实宽高比例
        //  console.log(e);
        if(or=='height'){     
        var viewWidth=zhi*ratio,           //设置图片显示宽度
            viewHeight=zhi; 
           if(viewWidth/2>windowWidth){
               console.log("你的图片已经超过屏幕宽度");
           } 
          }else{            
            var viewWidth=zhi,           //设置图片显示宽度
                viewHeight=zhi/ratio;
         }   
      var image=img; 
      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      image[e.target.dataset.index]={
         width:viewWidth,
         height:viewHeight
      }
        return image;
  }

module.exports = {
  imageLoad: imageLoad
}
登录后复制

并且在js中添加代码:


var imgload = require('../../utils/imgload.js')
Page({
  data: {
    images:{}
  },
//当图片加载完成后会调用imageLoad函数
  imageLoad:function(e){
    var that=this;
//imageLoad(e,zhi,img,or)
//--e:图片加载完成后触发事件;zhi:你要固定的宽(高)的值,img:保存图片的宽高值的变量,or:想要固定的宽(width),高(height)默认为固定宽
    var imgs= imgload.imageLoad(e,200,this.data.images,'height')
    this.setData({
      images:imgs
    });
  },
  onLoad:function(){
   
  },
  onReady: function () {  
    // 页面渲染完成  
    
  },
})
登录后复制

在wxml中添加代码:


<image wx:for="{{srcs}}" style="display:block;" src="{{ item }}" bindload="imageLoad" data-index="{{ index }}" 
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
登录后复制


不过这个方法有个缺点,有些人可能无法接受:
图片必须价值完才显示,所以会有延时

以上就是微信小程序开发过程中图片失真有什么解决办法?的详细内容,更多请关注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号