小程序图片裁剪组件基于image-cropper（修改版）

公司的小程序产品突然让把之前做的压缩图片上传加一个裁剪缩放选中功能。

从微信社区里找了一下，目前最火的image-cropper插件地址
有一说一这款插件的功能文档描述得挺全的（不像某信写的文档）,看了一下源码，用的小程序的自定义组件

直接复制组件到compoents里就可以使用了。

不过样式明显不符合自己的需求。经过一番修改最终的效果：

结果项目上线后没几天就有用户反馈上传的图片变模糊了

分析了一下原因，在PS里面绘制非矢量图放大或缩小会损失像素。这里我注意到在生成图片的宽高用的是裁剪框宽高乘以固定的比例，而这里的生成的图片是基于画布绘制不存在矢量图一说，那么当图片的宽度小于裁剪框乘以比例后的宽度，就会被拉伸到同样裁剪框比例的宽度从而导致图片失真并且还会加大图片的体积，同理大图缩小同样会导致图片失真。

那么只要解决生成的图片宽度不被拉伸或缩小就行了，在一开始源码里的pushImg选取图片后就获取图片的宽度,然后通过和裁剪宽相比计算出裁剪框的多少倍可以和图片宽度一样。最后再把这个倍数赋值给export_scale就可以原图宽高裁剪生成。而这里我想压缩一下图片的质量，只需要再把这个倍数*0.8就可以控制图片压缩到80%

后面的反馈中又发现了一个微信的坑，wx.getImageInfo在开发工具和某些机型上获取图片宽高，如果图片的原始信息上方向为right或left，会把宽高的值取反导致绘制的图片直接变形。这里需要判断一下方向将宽高改回来

pushImg(src) {if (src) {this.setData({imgSrc: src});//发现是手动赋值直接返回，交给watch处理return;}// getImageInfo接口传入 src: '' 会导致内存泄漏if (!this.data.imgSrc) return;//获取选取的图片的高度wx.getImageInfo({src: this.data.imgSrc,success: (res) => {let width = res.width;this.data.imageObject = JSON.parse(JSON.stringify(res)); // 深拷贝防止同时修改了resif(res.orientation == 'right' || res.orientation == 'left'){// 方向旋转了90度图片信息会把宽高取反，需要把宽和高改回来this.data.imageObject.width = res.height;width = res.height;this.data.imageObject.height = res.width;}// 原图宽高let export_scale = width/this.data.width; //调整生成图片的比例if(width > 2000){// 如果图片宽度大于2000以上的高清图this.setData({export_scale: export_scale*0.3, // 同时渲染画布上绘图比例同时压缩成30%大小})} else {this.setData({export_scale: export_scale*0.8, // 同时渲染画布上绘图比例同时压缩成80%大小})}//图片非本地路径需要换成本地路径if (this.data.imgSrc.search(/tmp/) == -1) {this.setData({imgSrc: res.path});}//计算最后图片尺寸this._imgComputeSize();if (this.data.limit_move) {//限制移动，不留空白处理this._imgMarginDetectionScale();}this._draw();},fail: (err) => {this.setData({imgSrc: ''});}});},

至于后面的一些样式方法直接看image-cropper（修改版）就行了，注意这里是我自己添加的上传图片的方法，可以自行修改

小程序图片裁剪组件基于image-cropper（修改版）相关推荐

微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
微信小程序图片裁剪功能的实现
文章目录图片上传与处理图片尺寸适配图片显示与裁剪框裁剪框的拖动与缩放增加canvas并裁剪图片保存图片到相册总结在之前的博文中,已经介绍了如何使用在前端开发中,实现较方便自由的图片裁剪 ...
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图一.第一步引入image-cropper,放在dist文 ...
uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
微信小程序图片裁剪image-cropper插件使用
首先非常感觉大佬的图片裁剪插件 image-cropper,下面就是大佬的地址文章地址https://developers.weixin.qq.com/community/develop/artic ...
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...
小程序图片自适应组件仿微信聊天图片
(转载请注明出处,本文章内容仅用于学习) 这几天开发小程序有个新需求,需要在聊天群中实现发送图片. 之前做聊天时已经把框架搭好,心想应该只需要后端增加上传图片的一系操作. 当然最后做出来是没问题,但是 ...
微信小程序怎么在wxml中插入多个图片_22. 教你零基础搭建小程序：小程序的常见组件（2）- image
大家好~今天讲小程序的常见组件-- image 图片标签小程序中的图片标签相当于 web 中的图片标签 ,但也存在着不同之处. 例如:小程序在后期要打包上线时,对图片的大小是有要求的,图片要< ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...

小程序图片裁剪组件基于image-cropper（修改版）

小程序图片裁剪组件基于image-cropper（修改版）相关推荐

最新文章

热门文章