小程序上传头像图片裁剪

原文链接:https://blog.csdn.net/qq_41049816/article/details/90604607*
给网上收到的不知道好不好用先收藏着:
小程序涉及到了用户上传头像的功能，用户可以手动选择裁剪区域。

（1）上传头像页面

选择图片，将得到的src地址传递到图片裁剪页面

wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function(res) {const src = res.tempFilePaths[0];wx.navigateTo({url: '../upload/upload?src=' + src})},
})

（2）图片裁剪页面

1、引入we-cropper.wxml，主要为了置入canvas作为图片裁剪的容器

<import src='/we-cropper/we-cropper.wxml'/>
<view class="cropper-wrapper"><template is="we-cropper" data="{{...cropperOpt}}"/><view class="cropper-buttons"><viewclass="upload"bindtap="uploadTap">上传图片</view><viewclass="getCropperImage"bindtap="getCropperImage">生成图片</view></view>
</view>

2、引入we-cropper.js

import WeCropper from '../../../we-cropper/we-cropper.js';
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight + 10Page({data: {cropperOpt: {id: 'cropper', // 用于手势操作的canvas组件标识符targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符pixelRatio: device.pixelRatio, // 传入设备像素比width, // 画布宽度height, // 画布高度src: '',scale: 2.5, // 最大缩放倍数zoom: 8, // 缩放系数cut: {x: (width - 320) / 2, // 裁剪框x轴起点y: (width - 320) / 2, // 裁剪框y轴起点width: 320, // 裁剪框宽度height: 320 // 裁剪框高度}}},// 页面onLoad函数中实例化WeCropperonLoad: function(options) {const {cropperOpt} = this.data;cropperOpt.src = options.src;if (cropperOpt.src) {this.cropper = new WeCropper(cropperOpt).on('ready', (ctx) => {console.log(`wecropper is ready for work!`)}).on('beforeImageLoad', (ctx) => {wx.showToast({title: '上传中',icon: 'loading',duration: 3000})}).on('imageLoad', (ctx) => {wx.hideToast()})}},// 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。touchStart(e) {this.cropper.touchStart(e)},touchMove(e) {this.cropper.touchMove(e)},touchEnd(e) {this.cropper.touchEnd(e)},// 自定义裁剪页面的布局中，可以重新选择图片uploadTap() {const self = thiswx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success(res) {const src = res.tempFilePaths[0]self.cropper.pushOrign(src)}})},// 生成图片getCropperImage()this.cropper.getCropperImage(tempFilePath => {// tempFilePath 为裁剪后的图片临时路径if (tempFilePath) {// 拿到裁剪后的图片路径的操作}else{console.log('获取图片地址失败，请稍后重试')}})}
})

注：we-cropper插件：https://we-plugin.github.io/we-cropper/#/

(我转载别人的,具体自己还没用过,希望对你有所帮助!!!)

小程序上传头像图片裁剪相关推荐

微信小程序上传头像先裁剪图片后上传
我是使用we-cropper.js插件实现的,下面是实现过程: 文件结构插件we-cropper.js /*** we-cropper v1.2.0* (c) 2018 dlhandsome* @l ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传单张或多张图片
上传作品图片,上传头像(count=1),亲测有效分享一下核心代码,希望能帮助大家 1.wxml  <view class='upload-works' ...
微信小程序 - 上传头像
// 上传文件 function uploadFile(url, filePath, name, formData, cb) { wx.uploadFile({ url: 'https://www.l ...
小程序上传服务器图片压缩,微信小程序压缩图片并上传到服务器（拿去即用）...
/**压缩图片*/compressionImage(tempFilePaths, params) { let that= thiswx.getImageInfo({ src: tempFilePath ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...

小程序上传头像图片裁剪

小程序上传头像图片裁剪相关推荐

最新文章

热门文章