前几天写的项目涉及到图片裁剪:到相册选完图片需要裁剪固定的宽高,看了博客园里面的博客,基本上都是有问题的,要么就是地址失效的,但是有很着急使用,所以今天项目做完,我赶紧来写一个完整版本的;
结尾处有代码包链接:无效的时候提醒我,我立马上传
结尾处有代码包链接:无效的时候提醒我,我立马上传
- 第一步:
app.js中添加全局变量imgs:'../../img/defaultImg.png'
代码如下:
App({
onLaunch: function() {
},
globalData: {
userInfo: null,
imgs:'../../img/defaultImg.png',//这个是我的默认图片
}
})
-
第二步:
需要展示的界面添加image
标签:<image src='{{defaultImg}}'></image>
并且defaultImg要在对应的JS文件中的data
声明 -
第三步:
点击触发的函数名bindtap="bindChooseType"
你可以自定义函数名,函数代码如下:
成功后有个带参
跳转,url: "/pages/center/upload?src=" + tempFilePaths
bindChooseType(e) {//选择相机还是相册 var demo=this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; var imgs = app.globalData.imgs;//这里获取到全局变量,没啥用,只是增强你的感觉,毕竟啥都没干呢 console.log(imgs) wx.navigateTo({ url: "/pages/center/upload?src=" + tempFilePaths }); demo.setData({ imgs: imgs }); } }); },
-
第四步:
首先获取上个界面带入的参数,就是选择图片后的临时路径,你可以对照着我的代码包里面的代码查看,裁剪的界面就是upload界面,weCropper是canvas,然后融合到unpload界面
需要注意的一点就是你的显示范围,或者说是你的截取宽高,裁剪宽高;
我的是要求750*400的尺寸,你除2就行,x,y,width,height都要改data: { cropperOpt: { id: "cropper", width: t, height: r, scale: 2.5, zoom: 8, cut: { x: (t - 375) / 2, y: (r - 200) / 2, width: 375, height: 200 } }
-
第五步
点击确定获取到新的图片临时路径tmp
,代码如下:
我写的o
就是新的临时路径,然后把这个新的路径放入到全局里面getCropperImage: function() { this.wecropper.getCropperImage(function(o) { console.log("这个是什么鬼" + o);//这里的o就是新的临时路径tmp, app.globalData.imgs = o; //这个是上传图片的关键,剪裁后的图片,添加到全局图片中 // wx.switchTab({ // url: "/pages/center/center" // }) wx.navigateBack({}) }); },
这里有个注意点,有的人可以用
wx.switchTab
去关闭当前界面栈返回到上个界面(不懂的去看看界面栈),也可以用wx.navigateBack({})
,这个是肯定不会有问题,wx.switchTab我的没反应 -
第六步
返回到上个界面怎么局部刷新呢,很简单,调用onShow(){}
,代码如下:onShow(){ console.log(app.globalData.imgs) this.setData({ defaultImg: app.globalData.imgs }); this.upLoad(app.globalData.imgs) },
-
第七部(图片转化为https格式)
onShow中调用this.upLoad(app.globalData.imgs)
方法,代码如下:upLoad(e) { wx.showLoading({ title: '上传中...', }) var demo = this; return;//自己使用的时候放开 wx.uploadFile({ url: 'https://xxxxxxxxxx',//找后端要 filePath: e, name: 'uploadImg',//和后端约定一个明早 formData: { // 'userId': app.globalData.iuserId }, success: function (res1) { wx.hideLoading(); }, }) },
解释下,
wx.uploadFile
就是把微信临时路径传到url对应的服务器,name
值你和后端自己约定,然后filePath
就是传的参数(临时路径,全局变量的那个),最后返回的就是一个https
链接的正常路径,你也可以重新setData
,这个时候的图片就可以供你保存图片或者表单提交都可以
你们有任何问题都可以留言区回复,谢谢
代码包地址:https://download.csdn.net/download/shaleilei/10808608
github地址: https://github.com/biubiuvue/imgClips
插件地址: https://github.com/we-plugin/we-cropper