wx-plugin / Image Cropper
Licence: mit
💯一款功能强大的微信小程序图片裁剪插件
Stars: ✭ 893
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Image Cropper
Ewa
Enhanced Wechat App Development Toolkit (微信小程序增强开发工具)。不同于 wepy 或者 mpvue,是一个轻量级小程序开发框架。支持原生小程序所有功能,无需学习,极易上手。支持转换为百度/字节跳动/QQ小程序。
Stars: ✭ 160 (-82.08%)
Mutual labels: mpvue, wepy
Flutter photo
Pick image/video from album by flutter. Support ios and android. UI by flutter, no native.
Stars: ✭ 285 (-68.09%)
Mutual labels: image, wechat
Mpvue Animated Number
微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Stars: ✭ 33 (-96.3%)
Mutual labels: mpvue, wechat
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (+80.4%)
Mutual labels: mpvue, wepy
spa-custom-hooks
💯 Custom hook of business layer (asynchronous task notification solution), supporting various applets and Vue architectures (uni app, wepy, mpvue, etc.)
Stars: ✭ 307 (-65.62%)
Mutual labels: wepy, mpvue
Image Focus
A dependency free utility for cropping images based on a focus point ~2.13kB gzipped
Stars: ✭ 134 (-84.99%)
Mutual labels: image, cropper
Cropme
Extremely Smooth and Easy Cropping library for you
Stars: ✭ 306 (-65.73%)
Mutual labels: image, cropper
Tocropviewcontroller
A view controller for iOS that allows users to crop portions of UIImage objects
Stars: ✭ 4,210 (+371.44%)
Mutual labels: image, cropper
Rskimagecropper
An image cropper / photo cropper for iOS like in the Contacts app with support for landscape orientation.
Stars: ✭ 2,371 (+165.51%)
Mutual labels: image, cropper
Cropiwa
📐 Configurable Custom Crop widget for Android
Stars: ✭ 2,185 (+144.68%)
Mutual labels: image, cropper
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+111.53%)
Mutual labels: image, wechat
Angular Cropperjs
CropperJS integration for Angular +6
Stars: ✭ 88 (-90.15%)
Mutual labels: image, cropper
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (-67.08%)
Mutual labels: image, cropper
Zmjimageeditor
ZMJImageEditor is a picture editing component like WeChat. It is powerful and easy to integrate, supporting rendering, text, rotation, tailoring, mapping and other functions. (ZMJImageEditor 是一个和微信一样图片编辑的组件,功能强大,极易集成,支持绘制、文字、旋转、剪裁、贴图等功能)
Stars: ✭ 470 (-47.37%)
Mutual labels: image, wechat
image-cropper
一款高性能的小程序图片裁剪插件,支持旋转。
1.功能强大。
2.性能超高超流畅,大图毫无卡顿感。
3.组件化,使用简单。
4.点击中间窗口实时查看裁剪结果。
体验Demo
初始准备
1.json文件中添加image-cropper
"usingComponents": {
"image-cropper": "../image-cropper/image-cropper"
},
"navigationBarTitleText": "裁剪图片",
"disableScroll": true
2.wxml文件
<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>
3.简单示例
Page({
data: {
src:'',
width:250,//宽度
height: 250,//高度
},
onLoad: function (options) {
//获取到image-cropper实例
this.cropper = this.selectComponent("#image-cropper");
//开始裁剪
this.setData({
src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
});
wx.showLoading({
title: '加载中'
})
},
cropperload(e){
console.log("cropper初始化完成");
},
loadimage(e){
console.log("图片加载完成",e.detail);
wx.hideLoading();
//重置图片角度、缩放、位置
this.cropper.imgReset();
},
clickcut(e) {
console.log(e.detail);
//点击裁剪框阅览图片
wx.previewImage({
current: e.detail.url, // 当前显示图片的http链接
urls: [e.detail.url] // 需要预览的图片http链接列表
})
},
})
参数说明(高亮属性表示对于上个版本有修改,请注意)
属性 | 类型 | 缺省值 | 取值 | 描述 | 必填 |
---|---|---|---|---|---|
imgSrc | String | 无 | 无限制 | 图片地址(如果是网络图片需配置安全域名) | 否 |
disable_rotate | Boolean | false | true/false | 禁止用户旋转(为false时建议同时设置limit_move为false) | 否 |
limit_move | Boolean | false | true/false | 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) | 否 |
width | Number | 200 | 超过屏幕宽度自动转为屏幕宽度 | 裁剪框宽度 | 否 |
height | Number | 200 | 超过屏幕高度自动转为屏幕高度 | 裁剪框高度 | 否 |
max_width | Number | 300 | 裁剪框最大宽度 | 裁剪框最大宽度 | 否 |
max_height | Number | 300 | 裁剪框最大高度 | 裁剪框最大高度 | 否 |
min_width | Number | 100 | 裁剪框最小宽度 | 裁剪框最小宽度 | 否 |
min_height | Number | 100 | 裁剪框最小高度 | 裁剪框最小高度 | 否 |
disable_width | Boolean | false | true/false | 锁定裁剪框宽度 | 否 |
disable_height | Boolean | false | true/false | 锁定裁剪框高度 | 否 |
disable_ratio | Boolean | false | true/false | 锁定裁剪框比例 | 否 |
export_scale | Number | 3 | 无限制 | 输出图片的比例(相对于裁剪框尺寸) | 否 |
quality | Number | 1 | 0-1 | 生成的图片质量 | 否 |
Number | 居中 | 始终在屏幕内 | 裁剪框上边距 | 否 | |
Number | 居中 | 始终在屏幕内 | 裁剪框左边距 | 否 | |
img_width |
Number | 宽高都不设置,最小边填满裁剪框 | 支持%(不加单位为px)(只设置宽度,高度自适应) | 图片宽度 | 否 |
img_height |
Number | 宽高都不设置,最小边填满裁剪框 | 支持%(不加单位为px)(只设置高度,宽度自适应) | 图片高度 | 否 |
scale | Number | 1 | 无限制 | 图片的缩放比 | 否 |
angle | Number | 0 | (limit_move=true时angle=n*90) | 图片的旋转角度 | 否 |
min_scale | Number | 0.5 | 无限制 | 图片的最小缩放比 | 否 |
max_scale | Number | 2 | 无限制 | 图片的最大缩放比 | 否 |
bindload | Function | null | 函数名称 | cropper初始化完成 | 否 |
bindimageload | Function | null | 函数名称 | 图片加载完成,返回值Object{width,height,path,type等} | 否 |
bindtapcut | Function | null | 函数名称 | 点击中间裁剪框,返回值Object{src,width,height} | 否 |
函数说明
函数名 | 参数 | 返回值 | 描述 | 参数必填 |
---|---|---|---|---|
upload | 无 | 无 | 调起wx上传图片接口并开始剪裁 | 否 |
pushImg | src | 无 | 放入图片开始裁剪 | 是 |
getImg | Function(回调函数) | Object{url,width,height} |
裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) | 是 |
X、Y | 无 | 设置裁剪框位置 | 是 | |
setCutSize | width、height | 无 | 设置裁剪框大小 | 是 |
setCutCenter | 无 | 无 | 设置裁剪框居中 | 否 |
setScale | scale | 无 | 设置图片缩放比例(不受min_scale、max_scale影响) | 是 |
setAngle | deg | 无 | 设置图片旋转角度(带过渡效果) | 是 |
setTransform | {x,y,angle,scale,cutX,cutY} | 无 | 图片在原有基础上的变化(scale受min_scale、max_scale影响) | 根据需要传参 |
imgReset | 无 | 无 | 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) | 否 |
Demo地址:https://github.com/wx-plugin/image-cropper-demo
如果有什么好的建议欢迎提issues或者提pr
QQ1977474741
鼓励作者
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].