转载:http://www.tbfl.store/day/mini.html
现在小程序很流行,使用小程序实现的功能也越来越多;很多小程序都有上传头像的功能;而且在上传头像的时候需要对头像进行裁剪
做为程序猿,我们一直保持着:“不能重复造轮子”的思想态度 ,来使用一款开源的 小程序裁剪API -- we-cropper , Git地址:https://github.com/we-plugin/we-cropper
操作步骤:
1:下载该插件,可使用Git客户端直接clone ,或者直接用浏览器下载压缩包;
2:对压缩包进行解压;
3:将压缩包下的dist文件夹中的文件考到自己的小程序目录下(比如我的目录叫we);
4:使用小程序上传头像:
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
const src = res.tempFilePaths[0];
//将选择的相册照片跳转至cut目录下面的index.wxml
//we-cropper.wxml就是我们直接复制过来的文件
wx.navigateTo({
url: '../cut/index?src=' + src
})
},
})
5:cut/index.wxml 的代码:
<import src="../wx/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{{...cropperOpt}}"/>
</view>
<view class="cropper-buttons">
<button class="upload"
bindtap="uploadTap">
重新上传
</button>
<button
class="getCropperImage"
bindtap="mygetCropperImage">
确定
</button>
</view>
6:cut/index.js 代码:
import WeCropper from '../wx/we-cropper.js';
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight -150
const app = getApp()
Page({
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 // tore/"裁剪框高度
}
}
},
// 页面onLoad函数中实例化WeCropper
onLoad: 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 = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
const src = res.tempFilePaths[0]
self.cropper.pushOrign(src)
}
})
},
// 生成图片
mygetCropperImage(){
var that = this;
this.cropper.getCropperImage((tempFilePath) => {
// tempFilePath 为裁剪后的图片临时路径
if (tempFilePath) {
//TODO 处理逻辑
}else{
console.log('获取图片地址失败,请稍后重试')
}
})
}
})
7:cut/index.wxss代码:
/* pages/cut/index.wxss */
.cropper-wrapper{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e5e5e5;
}
.cropper-buttons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0 20rpx;
box-sizing: border-box;
line-height: 150px;
}
.cropper-buttons .upload, .cropper-buttons .getCropperImage{
text-align: center;
z-index: 999999;
margin: 10rpx;
background-color: #36ccf9;
}
8:附,小程序一枚:
相关推荐
微信小程序源码,完整实现图片裁剪功能。 可以自由拖动裁剪框和手动调整裁剪尺寸,实时显示裁剪尺寸大小,准确完成图片裁剪功能,并且能够恢复原始图片,不会丢失原图。 提供完整源码,能够直接在小程序里正常运行,...
1、点击图片上传按钮时,跳转页面到cropper进行图片选择剪切wx.navigateTo({ url: `/pages/...8、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小,还可以缩放操作,需要的可以解除限制即可。
使用微信小程序Canvas组件,编辑裁剪图片到合适的大小;微信小程序编辑器直接打开example预览效果
3、不会的开发者人,下载后可以快速上手实现图片切图功能 4、主要功能有:是否裁剪的宽度固定、是否裁剪的高度固定、是否禁用旋转、是否锁定比例、是否限制移动、通过链接地址或打开视频本地图片选择裁剪图片、上下...
图片放缩、旋转、裁剪 for 微信小程序,实现方式是canvas作图 使用方法 下载代码,在微信开发者工具中选择相应包路径,打开后可直接查看 说明 项目基础来自这位同学https://github.com/dlhandsome/we-cropper ,增加...
实现了图片裁剪、添加文字、涂鸦、拼长图、拼相框等图片编辑功能,另外还有一个简易的表情包制作功能。 主要有以下几个功能:图片裁剪、添加文字、涂鸦功能、拼长图、拼相框、表情包制作、保存图片。常用于比较简单...
参照 这篇文章中的思路实现了头像裁剪。 在 pages/constant.js 中可以修改裁剪框尺寸,支持矩形。 在微信开发者工具中预览效果。 实现时需要注意的问题 movable-view 的 damping 需要设得很大,比如 1000 ,否则...
最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是...
论坛上传图片、头像图片裁剪小程序 可以根据自己需要修改下,很好用很简单的
文件IO操作:通过Java的文件IO操作读取本地文件系统中的图片文件,实现图片加载功能。 功能扩展: 图片编辑:可选的功能,允许用户对图片进行简单的编辑,如旋转、裁剪等。 图片信息显示:提供图片的基本信息显示,...
实现了图片裁剪、添加文字、涂鸦、拼长图、拼相框等图片编辑功能,另外还有一个简易的表情包制作功能。 扫描下面的微信小程序码,体验该小程序。 目录 使用代码 下载并安装,使用微信号扫码登录开发者工具。 打开...
2. 功能丰富:该小程序实现了图片的列表展示、预览、编辑和分享等功能。您可以通过搜索框搜索图片,也可以通过分类浏览图片。此外,您还可以对图片进行裁剪、旋转等操作,以及将图片分享给朋友或分享到朋友圈。 3. ...
基于Python实现的一个文档扫描仪应用程序,它可以帮助用户加载图片并裁剪文档,提供方便的文档扫描功能.zip这个项目是一个文档扫描仪应用程序,使用Python编写。它可以帮助用户加载图片并裁剪文档,提供方便的文档...
xCropper是一款专为微信小程序开发的图片裁切组件,通过精心的设计与技术实现,配合小程序强大的功能,带来前所未有的裁切体验。特点概述: 功能丰富 :支持图片缩放和拖动;支持裁切框缩放和拖动;支持多种裁切比例...
实现了图片裁剪、添加文字、涂鸦、拼长图、拼相框等图片编辑功能,另外还有一个简易的表情包制作功能。 主要有以下几个功能:图片裁剪、添加文字、涂鸦功能拼长图、拼相框、表情包制作、保存图片。常用于比较简单的...
3.其他更丰富的裁剪功能,请参见主页说明或程序,比如:提取图片上的文字并保存先裁剪后加水印一步到位忽略处理过的文件夹手动指定裁剪区域多裁剪区域裁剪打印二维码图片转Pdf 过滤小图或缩略图 AB文件夹配对拼合 ...
ajax+js+asp+aspjpeg实现剪切图片、拖拽图片、缩放图片、裁切图片 主要功能: 加载服务器上的图片,用户可以自定义图片的大小,拖拽,缩放,裁切,预览等效果! 可以作为自定义头像功能使用! 备注:在这里我要向...
项目代码基于 Vue 框架,为了避免受框架影响,我将代码全部改为原生 API 的实现方式进行说明,同时项目代码中有很多其他额外的细节和功能(预览、裁剪、上传进度等)在这里都省去,只介绍与图片处理相关的关键思路和...
基于Python实现的图片批量处理器程序是一个功能强大的图像处理工具,专门用于批量处理大量图片文件。该程序利用Python语言的灵活性和丰富的图像处理库,帮助用户快速、高效地完成图片的批量编辑、格式转换、优化等...