微信小程序剪切图片的功能

全平台（Vue、React、微信小程序）任意角度旋转图片裁剪组件 | 微信开放社区

Simple-Crop/USAGE-wechat.md at master · newbieYoung/Simple-Crop · GitHub

首选下载下来wechat这个文件夹。放在小程序的components里面

把它放做一个组件来用啦.我把这个文件夹重命名为simple-crop啦。

json里面引入

{"navigationBarTitleText": "基本信息","usingComponents": {"simple-crop": "../components/simple-crop/index"},"navigationStyle": "custom"
}

<button class="avatar-wrapper" bindtap='changeHead' ><image class="avatar" src="{{avatar1}}"></image>
</button><simple-crop wx:if="{{crop.visible}}" size="{{crop.size}}" src="{{crop.src}}" cropSizePercent="{{crop.cropSizePercent}}" borderColor="{{crop.borderColor}}" bindcropUpload="uploadCallback" bindcropClose="closeCallback" bindcropCrop="cropCallback"></simple-crop>

js里面

Page({data: {avatar1:'',crop:{src: null, // 裁剪图片地址visible: false, // 是否显示size: { //裁剪尺寸width: 400,height: 400},cropSizePercent: 0.9, //裁剪框显示比例borderColor: '#fff', //裁剪框边框颜色result: '', //裁剪结果地址}},

//选中图片以后
uploadCallback(e){//console.log("图片信息0",e)
},
//关闭裁剪图片弹窗
closeCallback(e){this.setData({['crop.visible']: false,})console.log("图片信息1",e)
},
//裁剪图片弹窗点击确定
cropCallback(e){// 返回选定照片的本地文件路径,访问上传接口this.UploadImg(e.detail.resultSrc);
},
//点击用户头像
changeHead(){var _this = this;wx.showActionSheet({itemList: ["拍照", "从相册中选择"],itemColor: "#000000",success: function (res) {if (!res.cancel) {if (res.tapIndex == 0) {_this.imgWShow("camera")        //拍照} else if (res.tapIndex == 1) {_this.imgWShow("album")      //相册}}}})
},
// 点击调用手机相册/拍照
imgWShow: function (type) {var _this = this;let len = 0;if (_this.data.imgList != null) {len = _this.data.imgList.length}   //获取当前已有的图片wx.chooseImage({count:1,     //最多还能上传的图片数,这里最多可以上传1张sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有success: function (res) {wx.showToast({title: '正在上传...',icon: "loading",mask: true,duration: 1000})_this.setData({['crop.visible']: true,['crop.src']: res.tempFilePaths[0],})},fail: function () {wx.showToast({title: '图片上传失败',icon: 'none'})return;}})
},

//上传头像给接口，本地图片avatarUrl转成网络图片
UploadImg(avatarUrl){uploadFile(avatarUrl).then(res => {this.setData({['crop.visible']: false,avatar1:res,})})
},

// 上传图片的接口封装

uploadFile: (filePath) => {let url = "XXXXX/uploaded_file"return new Promise((resolve, reject) => {wx.uploadFile({url: url,filePath: filePath,name: "file",header: {'content-type': 'application/json','token': getToken(),},success: (res) => {console.log(res)let result = JSON.parse(res.data)let {code} = result// resolve(res.data.data)if (code === 401 || code === 402 || code === 403) {wx.redirectTo({url: "/pages/site/login/login"})return} else if (code === 200) {return resolve(result.data)} else {return reject(result.message)}},fail() {reject('接口有误，请检查')}})})
},

})

微信小程序剪切图片的功能相关推荐

微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序发帖图片功能开发
微信小程序发帖图片功能开发用途:论坛交流里,用户通常会发帖,包含文字和图片前端界面上传界面的前端代码 <f ...
微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
微信小程序实现替换logo功能
1.背景产品觉得用公司logo生成的的二维码太丑觉得橘黄色和黑色不搭配,希望替换logo,在此之前,我也是没有做过这个功能的,于是我查阅了大量资料.加上自己的代码,实现了这个功能.实现的效果如下 ...
Java实现微信小程序校验图片是否含有违法违规内容
文章目录 1.Java实现微信小程序校验图片是否含有违法违规内容(security.imgSecCheck) 2.接口文档简述 3.Java实现对接接口 4.压缩图片(Thumbnails) 5.整合 ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
微信小程序实现身份证识别功能
微信小程序实现身份证识别功能 1,首先登录小程序公众平台 2,进入设置第三方设置 3,添加ocr插件 4,添加完成后 ,需要领取免费额度,是一天100次; 链接然后就是代码编写部分首先在app. ...

微信小程序剪切图片的功能

微信小程序剪切图片的功能相关推荐

最新文章

热门文章