微信小程序 图片等比例缩放(图片自适应屏幕)


Posted in Javascript onNovember 16, 2016

微信小程序 图片等比例缩放

早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.

老规矩,先上图.

1.图片高宽比小于屏幕高宽比

微信小程序 图片等比例缩放(图片自适应屏幕)

2.图片高宽比大于屏幕高宽比

微信小程序 图片等比例缩放(图片自适应屏幕)

3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放.

微信小程序 图片等比例缩放(图片自适应屏幕)

上代码:

1.index.wxml

<!--index.wxml--> 
<!--图片宽大于屏幕宽--> 
<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagefirstsrc}}" bindload="imageLoad"></image> 
<!--图片高大于屏幕高--> 
<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagesecondsrc}}" bindload="imageLoad"></image>--> 
<!--图片宽高大于屏幕宽高--> 
<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagethirdsrc}}" bindload="imageLoad"></image>-->

2.index.js

//index.js 
//获取应用实例 
var imageUtil = require('../../utils/util.js'); 
var app = getApp() 
Page({ 
 data: { 
  imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接 
  imagesecondsrc: 'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接 
  imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg', 
  imagewidth: 0,//缩放后的宽 
  imageheight: 0,//缩放后的高 
 
 }, 
 onLoad: function () { 
 }, 
 imageLoad: function (e) { 
  var imageSize = imageUtil.imageUtil(e) 
  this.setData({ 
   imagewidth: imageSize.imageWidth, 
   imageheight: imageSize.imageHeight 
  }) 
 } 
})

3.util.js

//util.js 
function imageUtil(e) { 
 var imageSize = {}; 
 var originalWidth = e.detail.width;//图片原始宽 
 var originalHeight = e.detail.height;//图片原始高 
 var originalScale = originalHeight/originalWidth;//图片高宽比 
 console.log('originalWidth: ' + originalWidth) 
 console.log('originalHeight: ' + originalHeight) 
 //获取屏幕宽高 
 wx.getSystemInfo({ 
  success: function (res) { 
   var windowWidth = res.windowWidth; 
   var windowHeight = res.windowHeight; 
   var windowscale = windowHeight/windowWidth;//屏幕高宽比 
   console.log('windowWidth: ' + windowWidth) 
   console.log('windowHeight: ' + windowHeight) 
   if(originalScale < windowscale){//图片高宽比小于屏幕高宽比 
    //图片缩放后的宽为屏幕宽 
     imageSize.imageWidth = windowWidth; 
     imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 
   }else{//图片高宽比大于屏幕高宽比 
    //图片缩放后的高为屏幕高 
     imageSize.imageHeight = windowHeight; 
     imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 
   } 
    
  } 
 }) 
 console.log('缩放后的宽: ' + imageSize.imageWidth) 
 console.log('缩放后的高: ' + imageSize.imageHeight) 
 return imageSize; 
} 
 
module.exports = { 
 imageUtil: imageUtil 
}
Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
Node.js批量给图片加水印的方法
Nov 15 #Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
django实现日志按日期分割
2020/05/21 Python
python合并多个excel文件的示例
2020/09/23 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
四风之害观后感
2015/06/09 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
讲解MySQL增删改操作
2022/05/06 MySQL