专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员

获取验证码

立即登录

HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序实现图片宽度高度等比例缩放，图片自适应的方式

2020-09-27 作者：黄珊

　　开发小程序初期，很多时候，图片的显示效果，不是拉长式，就是又扁又宽，在前台的视觉效果简直是丑哭，那么如何实现图片宽度高度等比例缩放，图片自适应的方式?

　　1.index.wxml

　　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

}

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序开发案例，尽在：http://www.hishop.com.cn/xiaocx/kaifa.html

线上+线下+进销存+收银+会员门店零售管理好帮手

极速收银管理
门店能实现快速收银，提升门店经营效率。
进销存管理
系统自带进销存管理，更好管理库存销售。
软硬件一体化
配备收银硬件一站式整体服务。

收银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

【本站声明】

1、本网站发布的该篇文章，目的在于分享电商知识及传递、交流相关电商信息，以便您学习或了解电商知识，请您不要用于其他用途；
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。