1 Star 8 Fork 4

Aaron-Gao / image-cropper

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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 生成的图片质量
cut_top Number 居中 始终在屏幕内 裁剪框上边距
cut_left 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)
setCutXY 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

鼓励作者

MIT License Copyright (c) 2018 wx-plugin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一款功能强大的微信小程序图片裁剪插件 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/aaron-gao/image-cropper.git
git@gitee.com:aaron-gao/image-cropper.git
aaron-gao
image-cropper
image-cropper
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891