fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

image-cropper
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/wx-plugin/image-cropper
网站描述:一款功能强大的微信小程序图片裁剪插件

image-cropper一款高性能的小程序图片裁剪插件,支持旋转、设置尺寸。


image-cropper特点

1.功能强大,请看下面demo。 

2.性能超高超流畅,大图毫无卡顿感。 

3.可以设置导出图片尺寸。

4.组件化,使用非常简单。 

5.点击中间窗口实时查看裁剪结果。  


初始准备

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链接列表
            })
        },
    })


链接: https://fly63.com/nav/2551

more>>
相关栏目
weex
阿里推出的Native框架,支持iOS、安卓、YunOS及Web等多端部署
官网GitHub
Flutter
谷歌推出的跨平台移动UI框架
官网GitHub
framework7
用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps
官网GitHub
ionic
ionic是一个用来开发混合手机应用的,开源的,免费的代码库
官网GitHub
uni-app
使用 Vue.js开发跨平台应用的前端框架
官网GitHub
Taro
多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用
官网GitHub
React Belle
一个React组件库
官网GitHub
noUiSlider
一个轻量级的Js范围滑块库
官网GitHub
mavonEditor
基于vue的markdown编辑器
点击进入GitHub
fair ui
为Flutter设计的动态化框架
官网GitHub
react-native-ui-lib
React Native的UI组件库和工具集
官网GitHub
react-native-sideswipe
简单跨平台的React Native可滑动的组件
点击进入GitHub
weui+
在weui和zepto基础上开发的增强UI组件
官网GitHub
weui
微信官方设计团队为微信内网页和微信小程序量身设计的的基础样式库
官网GitHub
ThorUI
轻量、简洁的移动端组件库
官网GitHub
MUI
最接近原生APP体验的高性能前端框架
官网GitHub

手机预览