微信小程序图片删除php,关于微信小程序中图片处理的问题总结
在小程序的开发过程中,页面布局中,我们经常会遇到一些图片处理的问题,比如,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等。
1.图片等比例缩放工具
[AppleScript]//Util.js
class Util{
/***
* 按照显示图片的宽等比例缩放得到显示图片的高
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageWidth 显示图片的宽,如果不传就使用屏幕的宽
* 返回图片的宽高对象
***/
static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
let imageSize = {};
if(imageWidth){
imageSize.imageWidth = imageWidth;
imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
}else{//如果没有传imageWidth,使用屏幕的宽
wx.getSystemInfo({
success: function (res) {
imageWidth = res.windowWidth;
imageSize.imageWidth = imageWidth;
imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;
}
});
}
return imageSize;
}
/***
* 按照显示图片的高等比例缩放得到显示图片的宽
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageHeight 显示图片的高,如果不传就使用屏幕的高
* 返回图片的宽高对象
***/
static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){
let imageSize = {};
if(imageHeight){
imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
imageSize.imageHeight = imageHeight;
}else{//如果没有传imageHeight,使用屏幕的高
wx.getSystemInfo({
success: function (res) {
imageHeight = res.windowHeight;
imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight;
imageSize.imageHeight = imageHeight;
}
});
}
return imageSize;
}
}
export default Util;
2.使用image组件加载图片,通过bindload动态的获取图片的高度和宽度,动态的设置图片的高度和宽度
[AppleScript]
index.js代码如下
[AppleScript]import Util from '../common/Util';
Page({
data:{
imageWidth:0,
imageHeight:0
},
imageLoad: function (e) {
//获取图片的原始宽度和高度
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);
let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);
this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});
}
})
微信小程序图片删除php,关于微信小程序中图片处理的问题总结相关推荐
- php如何获取图片地址,js如何直接获取网页中图片地址
这次给大家带来js如何直接获取网页中图片地址,js直接获取网页中图片地址的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法:js通过正则实现/** * 获取html代码中图片地址 * @p ...
- 微信dat文件可以删除吗?微信dat如何转换成图片
如果删除会无法打开聊天记录中图片或视频,如果你不需要这些可以删除. 微信dat文件可以删除.微信dat文件是电脑上微信聊天记录数据文件,可以选择删除,但需要注意,若是文件内有重要的数据(聊天记录.文件 ...
- indesign选中不了图片删除_(54)批量给图片加上说明文字
在<(32)一次置入多张图片>一文中我介绍了如何在 InDesign 中批量插入图片的方法,那么如何批量给这些图片加上说明文字呢?本文就谈谈这个问题. 给图片添加的说明文字在 InDesi ...
- php图片涂鸦,IOS_详解iOS App中图片的线段涂鸦功能的添加方法,接下来我们要讲图片的涂鸦, - phpStudy...
详解iOS App中图片的线段涂鸦功能的添加方法 接下来我们要讲图片的涂鸦,我们分开一点一点拓展,先给图片上划线 创建项目 起名testAddLine 接下来我们在默认生成的ViewControlle ...
- 图片缩小不失真_科技论文中图片的处理方法有哪些?
来源丨斐然智达SCI学术服务 有位论文审稿人在自己的博文中写道:"我审稿时看稿件的顺序是题目.摘要.图表. 前言.参考文献和正文".可见论文中图片的质量是非常重要的,图片质量的好坏 ...
- python 读取excel图片_如何用Python读取Excel中图片?
公众号: 早起Python 作者:刘早起 大家好,在使用Python进行办公自动化操作时,一定少不了与Excel表格的交互,我们通常是用pandas处理表格数据,但大多数情况下,都是读取表格中的数值进 ...
- word中图片为嵌入式格式时显示不全_word嵌入图片显示不全-不同类型文档中图片设置的几个小技巧...
在办公中,我们时常需要编辑文档,特别是有图片的文档涉及到一些格式处理,所以掌握一些编辑文档的技巧是提高工作效率必备的.以下是关于Word和PDF文档插入图片后的一些设置,一起来看看吧! 一.Word文 ...
- html转word 图片丢失 java_Java 设置 Word 文档中图片文字环绕方式
在Word文档中插入图片时,选择合理的图片文字环绕方式可以使图片的展示效果更好,也能使页面的排版更加美观.本文就将介绍如何使用Free Spire.Doc for Java 添加图片到Word文档并设 ...
- html中图片上下左右留白,vertical-align垂直居中( 消除html中图片下边缘留白 )
一.vertical-align支持4大类: 1.线类: baseline(默认值), top, middle, bottom 2.文本类:text-top, text-bottom 3.上标下标类 ...
最新文章
- 进阶必备:CNN经典论文代码复现 | 附下载链接
- Metasploit运行环境内存不要低于2GB
- 使用AppCompat项目模版
- python好学嘛-Python好学吗?Python学习路线
- [转帖]如何在quartusII中调用modelsim-altera_百度文库
- ST17H26 tea加密java版本
- 一个5年运维工程师的新年回首
- 线程NEW状态和RUNNABLE状态
- Apache、Tomcat、IIS(PHP、JSP、ASP)共存及安装Tomcat
- vCenter如何逃离Windows的坑(转)
- Hello IDEA
- ASP.NET中Request.ApplicationPath、Request.FilePath、Request.Path、.Request.MapPath、
- 高斯克吕格投影 python2.x 版本
- 我遇到了Rational Rose
- raw格式转换成qcow2格式
- 《c语言入门经典》Ivor Horton第十章练习题4
- LaTeX:pgf usepackage(宏包)的中译
- 哈佛结构冯·诺依曼结构
- 用USART来替代SPI,效果非常不错
- 从零开始学 Web 之 移动Web(九)微金所案例
热门文章
- dm365工作笔记20130731
- JavaScript抽象类及Class.create备忘
- 2.1.3码元、波特、速率、带宽
- linux at24测试程序,linux 2.6下eeprom at24c08 i2c设备驱动(new style probe方式)
- 向内存中连续存入数据_内存节省到极致!Redis中这个数据结构,值得每个程序员了解...
- php 501解决办法,PHP 使用错误处理解析
- 澜起科技云计算服务器_服务器严重缺货!云应用大爆发!云计算正强势起爆(附龙头)...
- MATLAB的GUI界面不显示XY坐标轴
- 立体视觉(Stereo Vision)-本征矩阵(essential matrix)和基本矩阵(fundamental matrix)
- QT中的滚动条QScrollArea