image cropper 다운로드 - image cropper 소스 코드 다운로드

image cropper

AI 소스 코드

1.0.0

다운로드

이미지 자르기 도구

회전을 지원하는 고성능 미니 프로그램 이미지 자르기 플러그인입니다.

`1.功能强大。`

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

`3.组件化，使用简单。`

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

데모 체험

초기 준비

1. json 파일에 이미지 자르기 도구 추가

    "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	끈	없음	제한 없는	이미지 주소(온라인 이미지인 경우 보안 도메인 이름을 구성해야 함)	아니요
비활성화_회전	부울	거짓	참/거짓	사용자 회전 비활성화(false인 경우, 동시에 Limit_move를 false로 설정하는 것이 좋습니다)	아니요
제한_이동	부울	거짓	참/거짓	그림의 이동 범위를 제한합니다. (자르기 상자는 항상 그림 내에 있습니다.) (true인 경우, 비활성화_회전을 동시에 true로 설정하는 것이 좋습니다)	아니요
너비	숫자	200	화면 너비를 초과하면 자동으로 화면 너비로 변환됩니다.	자르기 프레임 너비	아니요
키	숫자	200	화면 높이를 초과하면 자동으로 화면 높이로 변경됩니다.	자르기 상자 높이	아니요
최대 너비	숫자	300	자르기 상자의 최대 너비	자르기 상자의 최대 너비	아니요
최대_높이	숫자	300	자르기 프레임의 최대 높이	자르기 프레임의 최대 높이	아니요
최소 너비	숫자	100	자르기 상자 최소 너비	자르기 상자 최소 너비	아니요
최소 높이	숫자	100	자르기 상자의 최소 높이	자르기 상자의 최소 높이	아니요
비활성화 폭	부울	거짓	참/거짓	자르기 상자 너비 잠금	아니요
비활성화_높이	부울	거짓	참/거짓	자르기 상자 높이 잠금	아니요
비활성화 비율	부울	거짓	참/거짓	자르기 프레임 비율 고정	아니요
수출규모	숫자	3	제한 없는	출력 이미지의 비율(자르기 상자 크기 기준)	아니요
품질	숫자	1	0-1	생성된 이미지 품질	아니요
~~컷_탑~~	숫자	센터	항상 화면에	자르기 상자 상단 여백	아니요
~~컷_왼쪽~~	숫자	센터	항상 화면에	자르기 상자 왼쪽 여백	아니요
`img_width`	숫자	너비와 높이가 모두 설정되지 않았으며 가장 작은 면이 자르기 상자를 채웁니다.	% 지원(px에 단위를 추가하지 않음)(너비만 설정, 높이는 조정 가능)	이미지 너비	아니요
`img_height`	숫자	너비와 높이가 모두 설정되지 않았으며 가장 작은 면이 자르기 상자를 채웁니다.	% 지원(px에 단위를 추가하지 않음)(높이만 설정, 너비는 조정 가능)	이미지 높이	아니요
규모	숫자	1	제한 없는	이미지 줌 비율	아니요
각도	숫자	0	(limit_move=true일 때 각도=n*90)	이미지 회전 각도	아니요
최소 규모	숫자	0.5	제한 없는	이미지의 최소 줌 비율	아니요
최대 규모	숫자	2	제한 없는	이미지의 최대 줌 비율	아니요
바인드로드	기능	null	함수 이름	크로퍼 초기화 완료	아니요
바인드이미지로드	기능	null	함수 이름	이미지가 로드되고 반환 값은 Object{width, height, path, type, etc.}입니다.	아니요
바인드탭컷	기능	null	함수 이름	가운데 자르기 상자를 클릭하면 Object{src,width,height} 값이 반환됩니다.	아니요

기능 설명

함수 이름	매개변수	반환 값	설명하다	필수 매개변수
업로드	없음	없음	wx 업로드 이미지 인터페이스를 호출하고 자르기 시작	아니요
푸시이미지	소스	없음	이미지를 삽입하고 자르기 시작	예
getImg	함수(콜백 함수)	`Object{url,width,height}`	사진을 자르고 가져옵니다(사진 크기 = 사진 너비 및 높이 *export_scale)	예
~~setCutXY~~	엑스,와이	없음	자르기 프레임 위치 설정	예
setCutSize	너비, 높이	없음	자르기 상자 크기 설정	예
setCutCenter	없음	없음	자르기 프레임을 가운데로 설정	아니요
setScale	규모	없음	이미지 크기 조정 비율 설정(min_scale, max_scale의 영향을 받지 않음)	예
각도 설정	도	없음	이미지 회전 각도 설정(전환 효과 포함)	예
setTransform	{x,y,각도,크기,cutX,cutY}	없음	원본을 기준으로 이미지의 변화(크기는 min_scale, max_scale의 영향을 받음)	필요에 따라 매개변수 전달
imgReset	없음	없음	이미지의 각도, 확대/축소, 위치 재설정(onloadImage 콜백에서 사용 가능)	아니요