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

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

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

在utils中创建的一个js文件,暴露其接口imageLoad:

在需要使用的JS文件中:

完结。

关于微信小程序图片失真的解决方案的更多相关文章

  1. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  2. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  3. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  4. 微信小程序 图片裁剪

    微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...

  5. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  6. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  7. mpvue微信小程序http请求终极解决方案-fly.js

    fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度的实现代码复用(官网解释) fly.js有什么特 ...

  8. 微信小程序http连接访问解决方案

    HTTP + 加密 + 认证 + 完整性保护 = HTTPS,小程序考虑到信息安全的问题,选用了更为稳定安全的https 来进行信息传递. HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全 ...

  9. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

随机推荐

  1. Ninject之旅目录

    第一章:理解依赖注入 Ninject之旅之一:理解DI 第二章:开始使用Ninject Ninject之旅之二:开始使用Ninject(附程序下载) Ninject之旅之三:Ninject对象生命周期 ...

  2. jvm垃圾收集小记

    垃圾收集是java与c/c++的最大不同.有了jvm的自动垃圾收集机制,就可以让程序员专注于程序逻辑开发, 而不是花费大量的时间是考虑一个变量应该在什么时候去释放. 下面我们就来简单说一下java的垃 ...

  3. java 文件操作 写入和读取(小结一)

    参考了这篇博客并优化,谢谢:http://blog.sina.com.cn/s/blog_99201d890101b4le.html 功能:  实现通过两个类完成先写入文件,再读取数据计算显示 pac ...

  4. 第一章 Java语言概述

    1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...

  5. 【闲聊PHP】编程界的萝莉小美女--PHP

    本文地址 01 前言--上了贼船 不知道何时就上了PHP的贼船了,开始了web的开发,记得差不多两年前我还是做传统电子行业的人,就是嵌入式的方向,那时在天津或摆弄手机,或下煤窑摆弄电话,抑或就是在医疗 ...

  6. ACM 海贼王之伟大航路(深搜剪枝)

    "我是要成为海贼王的男人!" 路飞他们伟大航路行程的起点是罗格镇,终点是拉夫德鲁(那里藏匿着"唯一的大秘宝"--ONE PIECE).而航程中间,则是各式各样的 ...

  7. Python爬虫爬取qq视频等动态网页全代码

    环境:py3.4.4 32位 需要插件:selenium BeautifulSoup xlwt # coding = utf-8 from selenium import webdriverfrom ...

  8. 如何实现php字符串翻转?

    字符串:$str = "abcdefg"; // 方法一(直接使用php自带函数strrev($str)) print_r(strrev($str)); // 使用for循环方式, ...

  9. 一位资深程序员给予Java初学者的学习路线建议

    一位资深程序员给予Java初学者的学习路线建议 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干 ...

  10. Asp.Net MVC 之 Autofac 初步使用2 集成mvc 属性注入以及自动注入

    首先看下Demo2的结构     然后下面一步步将Autofac集成到mvc中. 首先,定义Model Product.cs public class Product { public int Id ...