ดาวน์โหลด image cropper - ดาวน์โหลด image cropper ซอร์สโค้ด

image cropper

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

ครอบตัดรูปภาพ

ปลั๊กอินครอบตัดรูปภาพมินิโปรแกรมประสิทธิภาพสูงที่รองรับการหมุน

`1.功能强大。`

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

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

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

ทดลองประสบการณ์

การเตรียมการเบื้องต้น

1. เพิ่ม image-cropper ลงในไฟล์ 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	สตริง	ไม่มี	ไม่จำกัด	ที่อยู่รูปภาพ (หากเป็นรูปภาพออนไลน์ จะต้องกำหนดค่าชื่อโดเมนที่ปลอดภัย)	เลขที่
ปิดการใช้งาน_หมุน	บูลีน	เท็จ	จริง/เท็จ	ปิดใช้การหมุนเวียนผู้ใช้ (หากเป็นเท็จ แนะนำให้ตั้งค่า Limit_move เป็นเท็จพร้อมกัน)	เลขที่
ขีดจำกัด_ย้าย	บูลีน	เท็จ	จริง/เท็จ	จำกัดช่วงการเคลื่อนไหวของรูปภาพ (กล่องครอบตัดจะอยู่ภายในรูปภาพเสมอ) (เมื่อเป็นจริง แนะนำให้ตั้งค่า Disable_rotate เป็น True พร้อมกัน)	เลขที่
ความกว้าง	ตัวเลข	200	หากเกินความกว้างของหน้าจอ หน้าจอจะถูกแปลงเป็นความกว้างของหน้าจอโดยอัตโนมัติ	ความกว้างของกรอบการครอบตัด	เลขที่
ความสูง	ตัวเลข	200	หากเกินความสูงของหน้าจอ หน้าจอจะเปลี่ยนเป็นความสูงของหน้าจอโดยอัตโนมัติ	ความสูงของกล่องครอบตัด	เลขที่
สูงสุด_ความกว้าง	ตัวเลข	300	ความกว้างสูงสุดของกล่องครอบตัด	ความกว้างสูงสุดของกล่องครอบตัด	เลขที่
สูงสุด_ความสูง	ตัวเลข	300	ความสูงสูงสุดของกรอบการครอบตัด	ความสูงสูงสุดของกรอบการครอบตัด	เลขที่
min_width	ตัวเลข	100	ความกว้างขั้นต่ำของกล่องครอบตัด	ความกว้างขั้นต่ำของกล่องครอบตัด	เลขที่
ขั้นต่ำ_ความสูง	ตัวเลข	100	ความสูงขั้นต่ำของกล่องครอบตัด	ความสูงขั้นต่ำของกล่องครอบตัด	เลขที่
ปิดการใช้งาน_ความกว้าง	บูลีน	เท็จ	จริง/เท็จ	ล็อคความกว้างของกล่องครอบตัด	เลขที่
ปิดการใช้งาน_ความสูง	บูลีน	เท็จ	จริง/เท็จ	ล็อคความสูงของกล่องครอบตัด	เลขที่
ปิดการใช้งาน_อัตราส่วน	บูลีน	เท็จ	จริง/เท็จ	ล็อคอัตราส่วนเฟรมครอบตัด	เลขที่
ส่งออก_ขนาด	ตัวเลข	3	ไม่จำกัด	สัดส่วนของภาพที่ส่งออก (สัมพันธ์กับขนาดกล่องครอบตัด)	เลขที่
คุณภาพ	ตัวเลข	1	0-1	คุณภาพของภาพที่สร้างขึ้น	เลขที่
~~cut_top~~	ตัวเลข	ศูนย์	บนหน้าจอเสมอ	ขอบด้านบนของกล่องครอบตัด	เลขที่
~~ตัด_ซ้าย~~	ตัวเลข	ศูนย์	บนหน้าจอเสมอ	กล่องครอบตัดขอบซ้าย	เลขที่
`img_width`	ตัวเลข	ไม่ได้ตั้งค่าความกว้างหรือความสูง และด้านที่เล็กที่สุดจะเต็มกล่องครอบตัด	รองรับ % (โดยไม่ต้องเพิ่มหน่วยใน px) (เฉพาะความกว้างและความสูงที่ตั้งค่าไว้เท่านั้นที่สามารถปรับเปลี่ยนได้)	ความกว้างของภาพ	เลขที่
`img_height`	ตัวเลข	ไม่ได้ตั้งค่าความกว้างหรือความสูง และด้านที่เล็กที่สุดจะเต็มกล่องครอบตัด	รองรับ % (โดยไม่ต้องเพิ่มหน่วยใน px) (เฉพาะความสูงและความกว้างที่ตั้งไว้เท่านั้นที่สามารถปรับเปลี่ยนได้)	ความสูงของภาพ	เลขที่
มาตราส่วน	ตัวเลข	1	ไม่จำกัด	อัตราส่วนการซูมภาพ	เลขที่
มุม	ตัวเลข	0	(มุม=n*90 เมื่อlimit_move=true)	มุมการหมุนภาพ	เลขที่
ขั้นต่ำ_ขนาด	ตัวเลข	0.5	ไม่จำกัด	อัตราส่วนการซูมขั้นต่ำของรูปภาพ	เลขที่
max_scale	ตัวเลข	2	ไม่จำกัด	อัตราส่วนการซูมสูงสุดของภาพ	เลขที่
ภาระผูกพัน	การทำงาน	โมฆะ	ชื่อฟังก์ชัน	การเริ่มต้นครอบตัดเสร็จสมบูรณ์	เลขที่
ผูกภาพโหลด	การทำงาน	โมฆะ	ชื่อฟังก์ชัน	โหลดรูปภาพแล้ว และค่าที่ส่งคืนคือ Object{width, height, path, type, ฯลฯ}	เลขที่
ไบน์แทปคัท	การทำงาน	โมฆะ	ชื่อฟังก์ชัน	คลิกที่ช่องครอบตัดตรงกลาง ส่งคืนค่า Object{src,width,height}	เลขที่

คำอธิบายฟังก์ชั่น

ชื่อฟังก์ชัน	พารามิเตอร์	ส่งกลับค่า	อธิบาย	ต้องมีพารามิเตอร์
อัปโหลด	ไม่มี	ไม่มี	เรียกอินเทอร์เฟซรูปภาพอัปโหลด wx และเริ่มการครอบตัด	เลขที่
พุชอิมเมจ	src	ไม่มี	แทรกรูปภาพและเริ่มครอบตัด	ใช่
รับอิมเมจ	ฟังก์ชั่น (ฟังก์ชั่นโทรกลับ)	`Object{url,width,height}`	ครอบตัดและรับรูปภาพ (ขนาดรูปภาพ = ความกว้างและความสูงของรูปภาพ * Export_scale)	ใช่
~~setCutXY~~	เอ็กซ์, ย	ไม่มี	กำหนดตำแหน่งกรอบการครอบตัด	ใช่
setCutSize	ความกว้างความสูง	ไม่มี	กำหนดขนาดกล่องครอบตัด	ใช่
setCutCenter	ไม่มี	ไม่มี	ตั้งกรอบการครอบตัดให้อยู่ตรงกลาง	เลขที่
ตั้งค่ามาตราส่วน	มาตราส่วน	ไม่มี	ตั้งค่าอัตราส่วนขนาดภาพ (ไม่ได้รับผลกระทบจาก min_scale, max_scale)	ใช่
ตั้งมุม	องศา	ไม่มี	ตั้งค่ามุมการหมุนภาพ (พร้อมเอฟเฟกต์การเปลี่ยนแปลง)	ใช่
ตั้งค่าการแปลง	{x,y,มุม,สเกล,cutX,cutY}	ไม่มี	การเปลี่ยนแปลงของรูปภาพตามต้นฉบับ (มาตราส่วนได้รับผลกระทบจาก min_scale, max_scale)	ส่งพารามิเตอร์ตามความจำเป็น
imgรีเซ็ต	ไม่มี	ไม่มี	รีเซ็ตมุม การซูม และตำแหน่งของรูปภาพ (สามารถใช้ในการเรียกกลับ onloadImage)	เลขที่