关于微信小程序图片失真的解决方案
今天来说一说 关于微信小程序的图片失真问题的解决,微信小程序的image标签要设置其宽高,不然图片若宽高过大会撑开原始图片大小的区域;如下

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

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

在需要使用的JS文件中:

完结。
关于微信小程序图片失真的解决方案的更多相关文章
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
- 微信小程序 图片裁剪
微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...
- 微信小程序图片保存到本地
微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...
- 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...
- mpvue微信小程序http请求终极解决方案-fly.js
fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...
- 微信小程序http连接访问解决方案
HTTP + 加密 + 认证 + 完整性保护 = HTTPS,小程序考虑到信息安全的问题,选用了更为稳定安全的https 来进行信息传递. HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全 ...
- 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...
随机推荐
- 初识XMLHttpRequeset
XMLHttpRequeset是什么 XmlHttpRequest,可扩展的超文本传输歇息.从字面上理解:xml,可扩展的标记语言:http,超文本传送协议:request,请求.XmlHttpReq ...
- LAMP学习小记
记录今天学习到的解决LAMP环境搭建的两个小问题: 问题1.xshell无法连接到虚拟机上的linux主机 解决方法: (1)进入网络配置文件: vi /etc/sysconfig/network-s ...
- warshall、
#include<iostream> int mian() { ][],b[][],c[][]; int i,j,k; cout<<"input the Boolea ...
- Windows编程坐标系统概念
Windows编程中关于设置映象模式的四个函数 SetWindowOrgSetViewPortOrgSetMapModeSetWindowExtExSetViewPortExtEx 一.Windows ...
- BZOJ 3652: 大新闻(数位DP+概率论)
不得不说数位DP和博弈论根本不熟啊QAQ,首先这道题嘛~~~可以分成两个子问题: 有加密:直接算出0~n中二进制每一位为0或为1分别有多少个,然后分位累加求和就行了= = 无加密:分别算出0~n中二进 ...
- android学习13——android egl hello world
通常情况下我们使用GLSurfaceview来实现opengl渲染.GLSurfaceview实现上是对SurfaceView和EGL的封装.为了从本质上理解渲染流程,使用EGL和SurfaceVie ...
- UWP: 体验应用内购新接口——StoreContext类
Windows 1607 版本(内部版本 14393)之后,微软在 SDK 添加了一些与应用商店相关的新接口,像应用试用与购买.应用内购等.这些接口相对于原来的接口要方便很多.就拿应用内购来说,以前的 ...
- 学习Java 以及对几大基本排序算法(对算法笔记书的研究)的一些学习总结(Java对算法的实现持续更新中)
Java排序一,冒泡排序! 刚刚开始学习Java,但是比较有兴趣研究算法.最近看了一本算法笔记,刚开始只是打算随便看看,但是发现这本书非常不错,尤其是对排序算法,以及哈希函数的一些解释,让我非常的感兴 ...
- HTML5培训哪里靠谱
兄弟连IT培训教育,是学科最全的IT培训机构,涵盖HTML5培训.等学科,并是业内推出真实千万级服务器架构课程的唯一培训学校.兄弟连已分别在北京.上海.广州.沈阳.郑州.济南.成都.杭州.南京.南宁. ...
- jquery.datetimepicker.js 当鼠标离开时,不选中当前时间,以达到清空的目的
validateOnBlur:true 当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法: // 时间设置 $('#BankProduct_sale_begin'). ...