WeChat 애플릿 이미지 크기 조정-미니 프로그램 개발-php.cn

WeChat 애플릿 이미지 크기 조정

不言

풀어 주다： 2018-06-23 14:59:15

원래의

10398명이 탐색했습니다.

이 글은 주로 WeChat 애플릿 사진의 비례 스케일링에 대한 관련 정보를 소개합니다.(그림은 화면에 맞게 조정됩니다.) 필요한 친구는 이를 참고할 수 있습니다.

WeChat 애플릿 이미지 비례 스케일링

이 포럼에서 누군가를 봤습니다. 아침에 이미지 스케일링에 대한 기사를 썼는데 이미지 너비가 화면 너비보다 큰지 판단했습니다. 이전에 Android에서 작업할 때 이미지 크기 조정 문제가 발생했습니다. 이미지 종횡비와 화면 종횡비를 사용해야합니다. 판단하세요.

사진을 먼저 업로드하세요.

1. 사진 비율이 화면 비율보다 작습니다.

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(&#39;../../utils/util.js&#39;); 
var app = getApp() 
Page({ 
 data: { 
  imagefirstsrc: &#39;http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png&#39;,//图片链接 
  imagesecondsrc: &#39;http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true&#39;,//图片链接 
  imagethirdsrc:&#39;http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg&#39;, 
  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(&#39;originalWidth: &#39; + originalWidth) 
 console.log(&#39;originalHeight: &#39; + originalHeight) 
 //获取屏幕宽高 
 wx.getSystemInfo({ 
  success: function (res) { 
   var windowWidth = res.windowWidth; 
   var windowHeight = res.windowHeight; 
   var windowscale = windowHeight/windowWidth;//屏幕高宽比 
   console.log(&#39;windowWidth: &#39; + windowWidth) 
   console.log(&#39;windowHeight: &#39; + windowHeight) 
   if(originalScale < windowscale){//图片高宽比小于屏幕高宽比 
    //图片缩放后的宽为屏幕宽 
     imageSize.imageWidth = windowWidth; 
     imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 
   }else{//图片高宽比大于屏幕高宽比 
    //图片缩放后的高为屏幕高 
     imageSize.imageHeight = windowHeight; 
     imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 
   } 
    
  } 
 }) 
 console.log(&#39;缩放后的宽: &#39; + imageSize.imageWidth) 
 console.log(&#39;缩放后的高: &#39; + imageSize.imageHeight) 
 return imageSize; 
} 
 
module.exports = { 
 imageUtil: imageUtil 
}

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!