先感谢封面摄影师 没几天了 准备出差 顺带可以出门拍照去了 😃
研究了下 把图片裁切的问题解决了 真刺激 对了 这个只是在微信小程序里用哈 其他项目工程的还请查阅一下其他的资料
其实之前有接触过这个组件 但是一直没细心看文档 研究下来还好 不太难 配置安装一下就可以用了 不多说 直接写细节 官方的地址是这个
https://github.com/IFmiss/wx-cropper
微信小程序项目建立之后 需要先安装下组件 npm直接安装就ok
npm i @dw/wx-cropper
如果之前没npm管理过项目其他组件的话 需要先跑一下
npm init
顺着填项目信息就可以 npm init跑完之后 再进行图片裁切安装 安装好之后 记得 微信小程序开发软件顶部的菜单里 工具->构建npm
构建完之后 项目目录里就会有裁切组件了
在需要用组件的页面.json文件里 写上声明 这里要注意下路径 否则会引入出错
在.wxml的页面里 加入裁切组件 下面的image标签 是用来装裁剪好的图片用的 裁切完的图片是个本地临时地址 如果需要用 还需要对图片处理下 比如上传到图床或者服务器里 然后返回图片地址 然后image的view用图片地址控制 没有图片地址的时候 就不显示这个view
<view class="container"> <my-cropper bind:close="hideCut" cutRatio="{{cutRatio}}" wx:if="{{showCropper}}" imageSrc="{{imageSrc}}" cropperRatio="{{cropperRatio}}" cropperWidth="{{cropperWidth}}" minCropperW="{{minCropperW}}" /> <view wx:if="{{endPic}}" class="f-width"> <image src="{{endPic}}" mode="widthFix" class="f-width"/> </view></view>
js文件里的代码是下面这样 已经相应改好了 可以直接使用的
Page({ data: { showCropper: true,// 是否使用showCropper cropperRatio: 1, cutRatio: 0, cropperWidth: 700, minCropperW: 200, endPic: '' }, showCut() { this.setData({ showCropper: true, cutRatio: 1 }) }, showCutDefault() { this.setData({ showCropper: true, cutRatio: 0 }) }, hideCut() { this.setData({ showCropper: false }) const img = arguments[0].detail if (img && img.path) { console.log('裁剪后的图片信息', img); this.setData({ imageInfo: img, endPic: img.path }) } },})
组件加载完之后 首屏会有一个图片加载中的提示框 到组件的index文件里删一下就ok
下面的代码位置 就是裁切完成的图片信息
if (img && img.path) { console.log('裁剪后的图片信息', img); this.setData({ imageInfo: img, endPic: img.path }) }
有临时地址和宽高
后续的图床或者其他处理就看自己的具体业务是怎么样的了 接下来会陆续加到提供给客户的小程序里 解决一下线下客户们上传的那些比例奇奇怪怪的图片
全流程结束 保持好奇 不断进步 下期见~
微信扫一扫,分享到朋友圈
