image-cropper指南攻略_一款功能强大的微信小程序图片裁剪插件

image-cropper指南攻略

GitHub:https://github.com/wx-plugin/image-cropper

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

海计划公众号
(0)
上一篇 2020/03/11 01:29
下一篇 2020/03/11 01:29

您可能感兴趣的内容

  • heatmap.js菜鸟指南_强大的Web热力图插件

    heatmap.js菜鸟指南 官方网址:http://www.patrick-wied.at/static/heatmapjs/ 简介描述:强大的Web热力图插件 Heatmap …

    2020/03/12
  • Devices.css小白知识_一个使用纯 CSS 实现移动设备的库

    Devices.css小白帮助 官方网址:https://picturepan2.github.io/devices.css/ GitHub:https://github.com/…

    2020/03/06
  • 什么场景下不应该使用 TypeScript?入门知识_TypeScript基础入门

    TypeScript 很棒,但有时用它编程只是在浪费时间。TypeScript 的优势在于它能在编译时调试 JavaScript,但有些情况并不适合我们使用 TypeScript,比如构建小型应用程序或原型应用时。 作为一名前 C#程序员,我是 TypeScript 和强类型编程语言的忠实粉丝——说是这么说,但我也知道不是每个项目都很适合用 TypeScri

    2020/03/24
  • FlattyShadow菜鸟知识_图标长投影在线生成

    FlattyShadow菜鸟知识 官方网址:http://ww7.flattyshadow.com/ 简介描述:图标长投影在线生成 长阴影是介于扁平与立体之间的一个折中方案,既有扁…

    2020/03/10
  • this指针小白入门_this小白攻略

    this指针小白入门 this指针 javascript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的. 以函数方法调用时this指针全局或严格模式中为u…

    2020/03/20
  • Touch WX菜鸟攻略_小程序组件化解决方案

    Touch WX菜鸟攻略 官方网址:https://www.wetouch.net/wx.html GitHub:https://github.com/uileader/touch…

    2020/03/11
  • 谷歌Go魅力的10个开源项目基础知识_开源入门指南

    谷歌的Go编程语言问世已有10年,无疑已扬名立万。由于丰富的库和抽象机制简化了开发并发分布式(即云)应用程序的工作,轻巧且易于编译的Go备受关注。但是真正衡量任何一种编程语言成功的标准是开发人员用它创建的项目。 Go已证明它是快速开发网络服务、软件基础结构项目以及各种功能强大的紧凑工具的首选。本文介绍了10个用Go语言编写的值得关注的项目,许多项目已经比用来

    2020/04/03
  • crypto.js使用帮助_提供了各种各样的加密算法的js库

    crypto.js指南教程 官方网址:https://github.com/brix/crypto-js GitHub:https://github.com/brix/crypto…

    2020/03/06
  • vue-i18n实现多语言切换效果基础指南_国际化指南攻略

    有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。 安装vue-i18n我们使用npm安装vue-i18n。npm install vue vue-i18n –save
    引入vue-i18

    2020/03/22
  • Flutter的布局和页面组件入门攻略_Flutter基础知识

    Flutter安装介绍在这里,你必须得安装好你的开发者环境,并且运行你的第一个flutter程序了。如果你还不知道怎么开始,请参考Flutter中文网安装教程或者Flutter官网安装教程进行安装环境。目前我开发是通过Android Stdio和VSCode进行开发,如果你是前端开发工程师,你会和我一样比较喜欢VSCode,但是涉及到Debug的时候,用An

    2020/03/23
  • Sentry菜鸟指南_一个实时的事件日志和聚合平台

    Sentry菜鸟指南 官方网址:https://sentry.io/welcome/ GitHub:https://github.com/getsentry 简介描述:一个实时的事…

    2020/03/06
  • 用 await/async 正确链接Js中的多个函数攻略教程_函数使用说明

    在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function(与 AWS Lambda,Azure Function 等相同)。到目前为止,我发现用 .then() 回调处理异步

    2020/03/26
  • js 中的 number 为何很怪异小白帮助_number基础知识

    声明:需要读者对二进制有一定的了解对于 JavaScript 开发者来说,或多或少都遇到过 js 在处理数字上的奇怪现象,比如:> 0.1 + 0.2
    0.30000000000000004> 0.1 + 1 – 1
    0.10000000000000009> 0.1 * 0.2
    0.020000000000000004> Math.pow(2, 53)
    90

    2020/04/05
  • react-redux 的使用基础指南_react小白攻略

    前言最近在学 React,看到 react-redux 这里,刚开始觉得一脸懵逼,后面通过查阅相关资料和一些对源码的解释,总算有点头绪,今天在这里总结下。类似于 Vue,React 中组件之间的状态管理 第三方包为:react-redux。react-redux 其实是 Redux的官方React绑定库,它能够使你的React组件从Redux store中读

    2020/03/29
  • es6之Array.of()和Array.from()小白基础_Array指南攻略

    es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小问题开始,逐步揭开它们的面纱。一个问题首先,我们来看一个问题,我需要创建一个共81项的数组,有9行,每行9个数(从1-9),在页面上进行展示,如下:怎么做呢?可以这样:let arr = [1, 2, 3, 4

    2020/03/31
  • 给想转行作程序员的人泼一盆冷水入门基础知识_程序员入门基础教程

    最开始想写一篇《现在转行作程序员还来得及吗》,因为有不少朋友问我这个问题,但写着写着发现我一直在劝退,索性改了题目。*本文针对的是那些想要转行找到工作的同学,而不是纯粹兴趣想学编程的同学。所以现在转行到底来不来得及?我觉得:来得及,但风险很大。有的朋友动力足,现在已经转行成功入职 BAT,有的半工半学,还在挣扎中;有的去了培训班,马上毕业了;有的问完继续走原

    2020/03/29