الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

cropper.blazor

cropper.blazor

cropper.blazor هو مكون يلتف حول الإصدار 1.6.2 cropper.js

بناء وتشغيل الاختبارنشر على صفحات githubنشر إلى Nuget

أقوى أداة زراعة الصور لـ Blazor Webassembly / Server و Hybrid مع MAUI و MVC وغيرها من الأطر.

Cropper.Blazor هو مكون أساسي لبناء ميزات زراعة الصور والمعالجة التفاعلية في تطبيقات الويب Blazor. تعمل مكتبة Blazor متعددة الاستخدامات على تمكين المطورين من دمج وظائف اقتصاص الصور البديهية مباشرة في مشاريع Blazor الخاصة بهم ، مما يوفر للمستخدمين تجربة تحرير صور سلسة وسريعة الاستجابة.

العرض التوضيحي

  • CropPerblazor.github.io/demo

API

  • CropPerblazor.github.io/api

أمثلة

  • CropPerblazor.github.io/examples/cropperusage

المتطلبات الأساسية

cropper.blazor .شبكة يدعم
- .NET 3.1 غير مدعوم
- .NET 5 غير مدعوم
1.1.x .NET 6 ✔
1.2.x .NET 6 & .NET 7 ✔
1.3.x .NET 6 & .NET 7 & .NET 8 ✔

  • مدعوم .NET 8.0 ، .NET 7.0 ، .NET 6.0 إصدارات لهذه المنصات على الويب:

    • Blazor Webassembly
    • خادم Blazor
    • خادم Blazor Hybrid مع MVC
    • Maui Blazor Hybrid

    ملاحظة: إذا كانت لديك مشكلة في تبعيات مشروع MAUI:

    • dotnet workload update + إعادة بناء المشروع. إذا لم يساعد ذلك ، جرب الخطوة أدناه حول حزمة تجاوز
    • حزمة التجاوز ، على سبيل المثال: <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" />

تتضمن الميزات الرئيسية وجوانب حزمة cropper.blazor

  • دمج Blazor: Cropper.blazor مصمم خصيصًا لتطبيقات Blazor ، مما يسمح للمطورين بدمج إمكانات محاصيل الصور دون عناء في مكوناتهم وصفحاتهم.
  • التفاعل السحب والتوحيد: يمكن للمستخدمين سحب وتغيير حجم منطقة الاقتصاد بسهولة لتحديد الجزء المطلوب من الصورة بدقة. هذه طريقة التفاعل البديهي تضمن زراعة دقيقة وفعالة.
  • دعم الدوران: cropper.blazor يتضمن القدرة على تدوير منطقة الصورة المحددة ، مما يمنح المستخدمين التحكم الكامل في اتجاه محتواهم المزروعة.
  • التحكم في نسبة العرض إلى الارتفاع: يمكن للمطورين تحديد نسب العرض إلى الارتفاع المخصصة للزراعة ، مما يضمن أن الصورة الناتجة تحافظ على نسب محددة. هذا أمر مهم بشكل خاص للتطبيقات التي تتطلب أبعاد صورة موحدة.
  • وظيفة التكبير: يتيح cropper.blazor للمستخدمين تكبير وخارج الصورة لضبط اختيار المحاصيل الخاصة بهم ، مما يضمن نتائج دقيقة.
  • استرجاع البيانات: توفر المكتبة طرقًا لاسترداد معلومات مفصلة حول المساحة التي تم اقتصاصها ، مثل الإحداثيات والأبعاد. يمكن التقاط هذه البيانات واستخدامها بسهولة لمزيد من عمليات تحميل الصور أو الصور.
  • التخصيص: Cropper.Blazor يوفر مجموعة واسعة من خيارات التكوين ، مما يتيح للمطورين تكييف تجربة المحاصيل لمطابقة الأسلوب المرئي وواجهة المستخدم لتطبيقات Blazor الخاصة بهم.
  • توافق المتصفح المتقاطع: تتوافق الحزمة مع العديد من متصفحات الويب الحديثة ، مما يضمن وظائف ثابتة وتجربة المستخدم عبر منصات مختلفة.
  • الوثائق: cropper.blazor مصحوبة بتوثيق شامل وأمثلة عملية ، وتبسيط عملية التكامل ومساعدة المطورين على تحقيق أقصى استفادة من ميزاته.
  • Open Source: Cropper.Blazor هو برنامج مفتوح المصدر ، وهو متاح للاستخدام المجاني في كل من مشاريع Blazor الشخصية والتجارية.

cropper.blazor يتبسيط تنفيذ زراعة الصور والتحرير داخل تطبيقات Blazor ، وتعزيز مشاركة المستخدم وتمكين معالجة الصور الديناميكية. سواء كنت تقوم بتطوير محرر صور قائم على Blazor ، أو تحميل صورة الملف الشخصي ، أو أي تطبيق آخر يتطلب زراعة الصور ، فإن Cropper.Blazor هي حزمة قيمة تبسط عملية التطوير وتثري قدرات التطبيق.

تثبيت 

 dotnet add package Cropper.Blazor

الاستخدام

العنصر المخصص الفوري: 

 @ using Cropper . Blazor . Components

أضف ما يلي إلى index.html (من جانب العميل-Blazor Webassembly أو Blazor Maui) أو _Host.cshtml (خادم Blazor-Blazor ، MVC مع خادم Blazor) في head 

< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " />

أضف ما يلي إلى index.html أو _Host.cshtml في body 

< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script >

أضف ما يلي إلى الأقسام ذات الصلة من Program.cs 

 using Cropper . Blazor . Extensions ; 
 builder . Services . AddCropper ( ) ;

بالإضافة إلى ذلك ، يمكنك تغيير المسار إلى وحدة CropPerjsinterop.min.js إذا كان موجودًا لسبب ما خارج مجلد جذر الخادم على النحو التالي:

  • تجاوز المسار الداخلي إلى وحدة CropPerjsinterop.min.js: 
 builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
    DefaultInternalPathToCropperModule = "<YourPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} )
  • تجاوز المسار العالمي الكامل إلى وحدة CropPerjsinterop.min.js: 
 builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
    IsActiveGlobalPath = true ,
    GlobalPathToCropperModule = "<StartUrlWithPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} )

أيضًا بالنسبة لخادم الخادم (خادم Blazor أو MVC مع خادم Blazor) ، تحتاج إلى إضافة إشارة تكوين ، وزيادة الحد الأقصى لرسالة محور واحد واردة (افتراضي 32 كيلو بايت) وإشارة الخريطة إلى مسارك. ومع ذلك ، إذا كانت صورك كبيرة جدًا ، فيجب زيادة المتغير المتغير MaximumReceIvemessagesize إلى القيمة المطلوبة. على سبيل المثال: 

 builder . Services . AddServerSideBlazor ( )
    . AddHubOptions ( options =>
    {
        options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
    } ) ; 
 app . MapBlazorHub ( ) ;

ثم استخدمه في ملف Razor (على سبيل المثال): 

< CropperComponent
  Class = " cropper-container "
  ErrorLoadImageClass = " cropper-error-load "
  @ref = " CropperComponent "
  OnCropStartEvent = " OnCropStartEvent "
  OnCropEndEvent = " OnCropEndEvent "
  OnCropEvent = " OnCropEvent "
  OnZoomEvent = " OnZoomEvent "
  OnCropMoveEvent = " OnCropMoveEvent "
  OnReadyEvent = " OnCropReadyEvent "
  OnLoadImageEvent = " OnLoadImageEvent "
  Src = " @Src "
  InputAttributes = " @InputAttributes "
  ErrorLoadImageSrc = " @_errorLoadImageSrc "
  IsErrorLoadImage = " @IsErrorLoadImage "
  OnErrorLoadImageEvent = " OnErrorLoadImageEvent "
  Options = " Options "
  IsAvailableInitCropper = " IsAvailableInitCropper " >
</ CropperComponent >

ثم استخدمه في ملف *.Razor.CS

يمكنك تجاوز وحدة Cropper JavaScript مع البرنامج النصي للتنفيذ الذي يمكن أن يحل محل 6 معالجات الأحداث (onReady ، oncropstart ، oncropmove ، oncropend ، oncrop ، onzoom) ، مثل التغلب على رد اتصال Onzoom في JavaScript: 

 window . overrideOnZoomCropperEvent = ( minZoomRatio , maxZoomRatio ) => {
    window . cropper . onZoom = function ( imageObject , event , correlationId ) {
		const jSEventData = this . getJSEventData ( event , correlationId ) ;
		
		const isApplyPreventZoomMinRatio = ( minZoomRatio != null ) && ( minZoomRatio > event . detail . ratio ) ;
		const isApplyPreventZoomMaxRatio = ( maxZoomRatio != null ) && ( event . detail . ratio > maxZoomRatio ) ;

		if ( isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio ) {
            event . preventDefault ( ) ;
        }
        else {
            imageObject . invokeMethodAsync ( 'CropperIsZoomed' , jSEventData ) ;
        }
    } ;
} ;

تحليل التوقيع onready ، oncropstart ، oncropmove ، oncropend ، oncrop ، onzoom معالجات الأحداث:

ImageObject

  • النوع: Object

الإشارة إلى مكون Cropper الأساسي.

حدث

  • النوع: CustomEvent

تمثل حدث Cropper.

الارتباط

  • اكتب: String
  • الافتراضي: Cropper.Blazor

معرف الارتباط هو معرف فريد يضاف إلى التفاعل الأول (الطلب الوارد) لتحديد السياق ويتم نقله إلى جميع المكونات المتورطة في تدفق المعاملة.

بالتأكيد بحاجة إلى إخبار هذه القواعد في Blazor: 

 await JSRuntime ! . InvokeVoidAsync ( "window.overrideCropperJsInteropModule" , MinZoomRatio , MaxZoomRatio ) ;

المساهمة

  1. مفترقه!
  2. قم بإنشاء فرع الميزات الخاص بك: git checkout -b feature/<my-new-feature>
  3. ارتكب التغييرات الخاصة بك: git commit -m 'Add some feature'
  4. ادفع إلى الفرع: git push origin feature/<my-new-feature>
  5. إرسال طلب سحب: د
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل