小程序上传图片裁剪工具 we-cropper的使用方法

小程序中提供了上传文件的api wx.uploadfile() 但是，当用户上传头像或其它图片时，希望经过裁剪了之后再上传，微信没有提供裁剪的功能

我个可以从 github 上找到一个插件 we-cropper 还有一个插件叫 image-cropper （这个有兴趣可以研究一下，本人没有用过）

地址：https://github.com/we-plugin/we-cropper

下载 master的zip的包，解压后得到如下图

在要上传头像的wxml上给一个按钮

并绑定事件

  uploadimage:function(){wx.navigateTo({url: '/pages/upload/index',})}

点击后跳转到 /pages/upload/index 页面（在小程序中新建这个页面）

wxml页面

//这个地方的文件位置根据自己的情况而定
<import src="../../thirdUtils/cropper/we-cropper.wxml"/><view class="cropper-wrapper"><template is="we-cropper" data="{{...cropperOpt}}"/><view class="cropper-buttons" style="color: {{cropperOpt.boundStyle.color}}"><viewclass="upload btn"bindtap="uploadTap">上传图片</view><viewclass="getCropperImage btn"style="background-color: {{cropperOpt.boundStyle.color}};"bindtap="getCropperImage">生成图片</view></view>
</view>

js文件

/*** Created by sail on 2017/6/1.*/
import WeCropper from '../../thirdUtils/cropper/we-cropper.js'const app = getApp()const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50Page({data: {cropperOpt: {id: 'cropper',targetId: 'targetCropper',pixelRatio: device.pixelRatio,width,height,scale: 2.5,zoom: 8,cut: {x: (width - 300) / 2,y: (height - 260) / 2,width: 300,height: 260},boundStyle: {color: "green",mask: 'rgba(0,0,0,0.8)',lineWidth: 1}}},touchStart(e) {this.cropper.touchStart(e)},touchMove(e) {this.cropper.touchMove(e)},touchEnd(e) {this.cropper.touchEnd(e)},//当点击生成图片按钮的时候，得到图片的src后，调用wx.uploadFile()上传图片，成功后可以再跳转到想要去的页面getCropperImage() {this.cropper.getCropperImage().then((src) => {wx.uploadFile({url: 'http://t.kan.cn/roune/auth_api/uploadimage?uid=198', //这里是上传的服务器地址filePath: src,name: "avatar",success: function (res) {console.log(res);console.log("uploadOK");wx.redirectTo({...........})}})}).catch((err) => {wx.showModal({title: '温馨提示',content: err.message})})},uploadTap() {const self = thiswx.chooseImage({count: 1, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success(res) {const src = res.tempFilePaths[0]//  获取裁剪图片资源后，给data添加src属性及其值self.cropper.pushOrign(src)}})},onLoad(option) {const { cropperOpt } = this.datacropperOpt.boundStyle.color = "green"this.setData({ cropperOpt })this.cropper = new WeCropper(cropperOpt).on('ready', (ctx) => {console.log(`wecropper is ready for work!`)}).on('beforeImageLoad', (ctx) => {wx.showToast({title: '上传中',icon: 'loading',duration: 20000})}).on('imageLoad', (ctx) => {wx.hideToast()})}
})

.wxss 文件


.cropper{position: absolute;top: 0;left: 0;
}.cropper-buttons{background-color: rgba(0, 0, 0, 0.95);
}.btn{height: 30px;line-height: 30px;padding: 0 24rpx;border-radius: 2px;color: #ffffff;
}.cropper-buttons{display: flex;flex-direction: row;justify-content: space-between;align-items: center;position: absolute;bottom: 0;left: 0;width: 100%;height: 50px;padding: 0 20rpx;box-sizing: border-box;line-height: 50px;
}

以上就可以上传裁剪头像了

小程序上传图片裁剪工具 we-cropper的使用方法相关推荐

微信小程序上传图片裁剪工具image-cropper使用
image-cropper 一款高性能的小程序图片裁剪插件,支持旋转.设置尺寸 1.性能超高超流畅,大图毫无卡顿感. 2.可以设置导出图片尺寸. 3.组件化,使用非常简单. 4.自由模式和限制可随意切 ...
图片上传成功但是图片显示不出来_小程序上传图片到腾讯云
这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大准备工作上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信html5图片裁切,微信小程序图片裁剪工具we-cropper
微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器在线体验 Feature 实用的API 灵活的钩子函数多场景的demo可供参考: 常规裁剪上传裁剪头像裁剪网络图 ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...
微信小程序上传图片压缩方案
小程序上传图片需要进行压缩,可以使用wx.getFileSystemManager()方法将图片转换成base64格式,再使用canvas将图片压缩成指定大小. //选择图片wx.chooseImag ...

小程序上传图片裁剪工具 we-cropper的使用方法

小程序上传图片裁剪工具 we-cropper的使用方法相关推荐

最新文章

热门文章