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

    早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做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
    }



    我的博客:http://blog.csdn.net/qq_31383345

    展开全文
  • 由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和...第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第...
  • 非常感谢大家一大早来到广州参加微信公开课。去年公开课是我第一次露面,并且在去年差不多这个时候时候宣布了我们的小程序要启动并且准备投入到公众号之外新的一种服务的形态里面去。 今年,我的同事问我说要不要...
  • 微信小程序开发学习资料 2019-10-08 21:19:58
    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 张小龙全面阐述小程序,定档1月9日上线(附90分钟...
  • 微信小程序进阶篇 2017-05-30 23:05:56
    微信小程序
  • 2017年微信公开课各位朋友,大家早上好!我是张小龙。 非常感谢大家一大早来到广州参加微信公开课。去年公开课是我第一次露面,并且在去年差不多这个时候时候宣布了我们的小程序要启动并且准备投入到公众号之外新的...
  • 在今天举行的2017微信公开课PRO版上,腾讯微信负责人张小龙表示,微信小程序特性是:无须安装、触手可及、用完即走、无须卸载。 张小龙解答了关于小程序的疑问,并透露小程序计划于2017年1月9日正式上线。 ...
  • 下载 2019.06.13更新 2.16 GB共1,848 个文件,487 个文件夹。 文件夹 PATH 列表 卷序列号为 0FEA-0BC6 E:. │ 001各种结构文件列表生成.bat │ 目录列表_树2019.06.13更新.txt ...├─20190612后收集游戏 ...
  • 今天2017微信公开课PRO版在广州亚运城综合体育馆举行,这次2017微信公开课大会以“下一站”为主题,而此次的微信公开课的看点大家可能就集中在腾讯公司高级副总裁、微信之父——张小龙的演讲上了!今天中午各个...
  • 今年,我的同事问我说要不要今年继续来参加公开课,给大家做一些对于去年说的小程序的一些新的进展介绍,我其实也想了很久,最后我觉得作为对去年的一个回应,我内心里是非常的激动,可能很多朋友知道微信的历史,
  • 在今天的微信公开课广州PRO版上,“微信之父”张小龙宣布:希望小程序1月9日正式上线!同时,他解答了大家最关心的8个关于小程序的疑问: 1.小程序不用下载,没有入口,只有二维码; 2.小程序没有订阅,只有访问; 3...
  • 这份文字是根据近期团队做来问丁香医生 SPA 和 丁香医生小程序 加载速度优化的经历整理而成。 效果 古人有一句话叫做:治感冒看疗效。既然是关于速度优化的,我们就先来看一下优化的效果。...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • https://github.com/dstmath/HWFramework/blob/master/Honor5C-7.0/src/main/java/java/lang/Daemons.java https://github.com/dstmath/HWFramework/blob/master/P9-8.0/src/main/java/java/lang/Daemons.java ...
  • 1、[CMS模板插件] 织梦微信个人版打赏插件|dedecms微信个人版打赏插件2、[CMS模板插件] 织梦微信内容页插件|dedecms微信内容页插件|织梦微信插件3、[CMS模板插件] dedecms微信登录插件|织梦微信登录插件4、[CMS模板...
  • 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 2、小程序优缺点 2.1、小程序优点 (一)新时代推广渠道 作为一个新产品,小...
  • 微信小程序从对外发布两百个内测名额阶段 到现在公测阶段,网上关于小程序的资料文章更是一篇又一篇,包括爱范儿,虎嗅,36氪,知乎等等。对于正在创业及计划创业的人来说,无非是又一片蓝海。 80、90后的...
1 2 3 4 5 ... 10
收藏数 197
精华内容 78