微信小程序图片裁剪image-cropper插件使用_image-cropper官网

首先非常感觉大佬的图片裁剪插件 image-cropper，下面就是大佬的地址
文章地址https://developers.weixin.qq.com/community/develop/article/doc/000aecd2f38df8efb55a0250b5bc13
大佬Demo地址：https://github.com/wx-plugin/image-cropper-demo
image-cropper插件github地址：https://github.com/wx-plugin/image-cropper

1.功能强大。

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

3.组件化，使用简单。

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

体验Demo

初始准备

先在component中创建 image-cropper插件文件夹，再把上面四文件个放入文件夹中

1.在要引用插件的页面json文件中添加image-cropper

    "usingComponents": {
   
       "image-cropper": "../image-cropper/image-cropper"
    },
    "navigationBarTitleText": "裁剪图片",
    "disableScroll": true
1
2
3
4
5
6

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>
1
2
3
4
5
6

3.简单示例，具体用法看demo中的代码

    Page({
   
        data: {
   
            src:''
1
2
3
4