تنزيل image cropper - تحميل كود مصدر image cropper

image cropper

كود الذكاء الاصطناعي

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	خيط	لا أحد	غير محدود	عنوان الصورة (إذا كانت صورة عبر الإنترنت، فيجب تكوين اسم مجال آمن)	لا
Disable_rotate	منطقية	خطأ شنيع	صحيح / خطأ	تعطيل تدوير المستخدم (إذا كان خطأ، فمن المستحسن تعيين Limit_move على خطأ في نفس الوقت)	لا
Limit_move	منطقية	خطأ شنيع	صحيح / خطأ	تحديد النطاق المتحرك للصورة (يوجد مربع الاقتصاص دائمًا داخل الصورة) (عندما يكون صحيحًا، يوصى بتعيين Disable_rotate على True في نفس الوقت)	لا
عرض	رقم	200	إذا تم تجاوز عرض الشاشة، فسيتم تحويله تلقائيًا إلى عرض الشاشة.	اقتصاص عرض الإطار	لا
ارتفاع	رقم	200	إذا تجاوز ارتفاع الشاشة، فسوف يتغير تلقائيًا إلى ارتفاع الشاشة.	ارتفاع مربع الاقتصاص	لا
max_width	رقم	300	أقصى عرض لصندوق الاقتصاص	أقصى عرض لصندوق الاقتصاص	لا
max_height	رقم	300	الحد الأقصى لارتفاع إطار الاقتصاص	الحد الأقصى لارتفاع إطار الاقتصاص	لا
min_width	رقم	100	الحد الأدنى لعرض صندوق الاقتصاص	الحد الأدنى لعرض صندوق الاقتصاص	لا
min_height	رقم	100	الحد الأدنى لارتفاع صندوق الاقتصاص	الحد الأدنى لارتفاع صندوق الاقتصاص	لا
Disable_width	منطقية	خطأ شنيع	صحيح / خطأ	قفل عرض مربع الاقتصاص	لا
Disable_height	منطقية	خطأ شنيع	صحيح / خطأ	قفل ارتفاع صندوق الاقتصاص	لا
Disable_ratio	منطقية	خطأ شنيع	صحيح / خطأ	قفل نسبة إطار الاقتصاص	لا
Export_scale	رقم	3	غير محدود	نسبة الصورة الناتجة (بالنسبة لحجم مربع الاقتصاص)	لا
جودة	رقم	1	0-1	جودة الصورة المولدة	لا
~~Cut_top~~	رقم	مركز	دائما على الشاشة	مربع المحاصيل الهامش العلوي	لا
~~Cut_left~~	رقم	مركز	دائما على الشاشة	مربع الاقتصاص الهامش الأيسر	لا
`img_width`	رقم	لم يتم تعيين العرض أو الارتفاع، وأصغر جانب يملأ مربع الاقتصاص.	دعم % (بدون إضافة وحدة إلى px) (ضبط العرض فقط، والارتفاع قابل للتكيف)	عرض الصورة	لا
`img_height`	رقم	لم يتم تعيين العرض أو الارتفاع، وأصغر جانب يملأ مربع الاقتصاص.	دعم % (بدون إضافة وحدة إلى px) (ضبط الارتفاع والعرض قابل للتكيف فقط)	ارتفاع الصورة	لا
حجم	رقم	1	غير محدود	نسبة تكبير الصورة	لا
زاوية	رقم	0	(الزاوية=n*90 عندما يكون Limit_move=صحيح)	زاوية دوران الصورة	لا
min_scale	رقم	0.5	غير محدود	الحد الأدنى لنسبة التكبير للصورة	لا
max_scale	رقم	2	غير محدود	الحد الأقصى لنسبة التكبير للصورة	لا
com.bindload	وظيفة	باطل	اسم الوظيفة	اكتملت تهيئة أداة الاقتصاص	لا
bindimageload	وظيفة	باطل	اسم الوظيفة	تم تحميل الصورة، والقيمة المرجعة هي Object{width, height, path, type, etc.}	لا
com.bindtapcut	وظيفة	باطل	اسم الوظيفة	انقر فوق مربع الاقتصاص الأوسط، وقم بإرجاع القيمة Object{src,width,height}	لا

وصف الوظيفة

اسم الوظيفة	المعلمة	قيمة الإرجاع	يصف	المعلمة مطلوبة
رفع	لا أحد	لا أحد	قم باستدعاء واجهة تحميل الصورة wx وابدأ في الاقتصاص	لا
com.pushImg	src	لا أحد	أدخل الصورة وابدأ في الاقتصاص	نعم
getImg	الوظيفة (وظيفة رد الاتصال)	`Object{url,width,height}`	قم بقص الصورة والحصول عليها (حجم الصورة = عرض الصورة وارتفاعها * مقياس_التصدير)	نعم
~~setCutXY~~	اكس، ي	لا أحد	ضبط موضع إطار الاقتصاص	نعم
setCutSize	العرض والارتفاع	لا أحد	ضبط حجم صندوق الاقتصاص	نعم
setCutCenter	لا أحد	لا أحد	اضبط إطار الاقتصاص على المركز	لا
setScale	حجم	لا أحد	ضبط نسبة قياس الصورة (لا تتأثر بـ min_scale، max_scale)	نعم
setAngle	درجة	لا أحد	ضبط زاوية دوران الصورة (مع تأثير الانتقال)	نعم
setTransform	{x،y،زاوية،مقياس،cutX،cutY}	لا أحد	التغييرات في الصورة بناءً على الصورة الأصلية (يتأثر المقياس بـ min_scale، max_scale)	تمرير المعلمات حسب الحاجة
imgReset	لا أحد	لا أحد	إعادة ضبط زاوية الصورة وتكبيرها وموضعها (يمكن استخدامها في رد الاتصال onloadImage)	لا