หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

cropper.blazor

cropper.blazor

cropper.blazor เป็นส่วนประกอบที่ล้อมรอบ cropper.js เวอร์ชัน 1.6.2

สร้างและเรียกใช้การทดสอบปรับใช้กับหน้า GitHubปรับใช้กับ NuGet

เครื่องมือการครอบตัดภาพที่ทรงพลังที่สุดสำหรับ Blazor WebAssembly / Server, ไฮบริดด้วย 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 Server Hybrid พร้อม MVC
    • Maui Blazor Hybrid

    หมายเหตุ: หากคุณมีปัญหากับการพึ่งพาโครงการ MAUI:

    • dotnet workload update + สร้างโครงการใหม่ หากไม่ช่วยให้ลองใช้ขั้นตอนด้านล่างเกี่ยวกับแพ็คเกจแทนที่
    • แพ็คเกจแทนที่: <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" />

คุณสมบัติที่สำคัญและแง่มุมของแพ็คเกจ cropper.blazor รวมถึง

  • Blazor Integration: Cropper.Blazor ได้รับการออกแบบมาโดยเฉพาะสำหรับแอปพลิเคชัน Blazor ช่วยให้นักพัฒนาสามารถรวมความสามารถในการปลูกถ่ายภาพเข้ากับส่วนประกอบและหน้าของ Blazor ได้อย่างง่ายดาย
  • การโต้ตอบแบบลากและขนาด: ผู้ใช้สามารถลากและปรับขนาดพื้นที่การปลูกพืชเพื่อเลือกส่วนที่ต้องการของภาพได้อย่างแม่นยำ วิธีการโต้ตอบที่ใช้งานง่ายนี้ช่วยให้มั่นใจได้ว่าการปลูกพืชที่แม่นยำและมีประสิทธิภาพ
  • การสนับสนุนการหมุน: Cropper.Blazor รวมถึงความสามารถในการหมุนพื้นที่ภาพที่เลือกให้ผู้ใช้ควบคุมการวางแนวเนื้อหาที่ถูกครอบตัดได้อย่างเต็มที่
  • การควบคุมอัตราส่วนภาพ: นักพัฒนาสามารถกำหนดอัตราส่วนภาพที่กำหนดเองสำหรับการปลูกพืชเพื่อให้มั่นใจว่าภาพที่เกิดขึ้นจะรักษาสัดส่วนที่เฉพาะเจาะจง สิ่งนี้มีค่าอย่างยิ่งสำหรับแอปพลิเคชันที่ต้องการขนาดภาพที่ได้มาตรฐาน
  • ฟังก์ชั่นการซูม: Cropper.Blazor ช่วยให้ผู้ใช้สามารถซูมเข้าและออกจากภาพเพื่อปรับแต่งการเลือกการปลูกพืชของพวกเขารับประกันผลลัพธ์ที่แม่นยำ
  • การดึงข้อมูล: ห้องสมุดมีวิธีการดึงข้อมูลรายละเอียดเกี่ยวกับพื้นที่ที่ถูกครอบตัดเช่นพิกัดและมิติ ข้อมูลนี้สามารถบันทึกและใช้งานได้ง่ายสำหรับการประมวลผลเพิ่มเติมหรืออัปโหลดรูปภาพ
  • การปรับแต่ง: Cropper.blazor มีตัวเลือกการกำหนดค่าที่หลากหลายทำให้นักพัฒนาสามารถปรับแต่งประสบการณ์การครอบตัดเพื่อให้ตรงกับสไตล์การมองเห็นและส่วนต่อประสานผู้ใช้ของแอปพลิเคชัน Blazor ของพวกเขา
  • ความเข้ากันได้ข้ามเบราว์เซอร์: แพ็คเกจนี้เข้ากันได้กับเว็บเบราว์เซอร์ที่ทันสมัยต่างๆเพื่อให้มั่นใจว่าฟังก์ชั่นที่สอดคล้องกันและประสบการณ์ผู้ใช้ในแพลตฟอร์มที่แตกต่างกัน
  • เอกสาร: Cropper.blazor มาพร้อมกับเอกสารที่ครอบคลุมและตัวอย่างที่เป็นประโยชน์ทำให้กระบวนการรวมและช่วยให้นักพัฒนาได้รับประโยชน์สูงสุดจากคุณสมบัติ
  • โอเพ่นซอร์ส: Cropper.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, MVC พร้อม Blazor Server) ใน 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 Server หรือ MVC พร้อม Blazor Server) คุณต้องเพิ่มสัญญาณการกำหนดค่าเพิ่มค่าสูงสุดของข้อความฮับที่เข้ามาเดียว (ค่าเริ่มต้นคือ 32KB) และ MAP SignalR ไปยังเส้นทางของคุณ อย่างไรก็ตามหากภาพของคุณมีขนาดใหญ่เกินไปตัวแปรสูงสุดควรเพิ่มขึ้นเป็นค่าที่ต้องการ ตัวอย่างเช่น: 

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

จากนั้นใช้ในไฟล์มีดโกน (เช่น): 

< 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

คุณสามารถแทนที่โมดูล JavaScript Cropper ด้วยสคริปต์การดำเนินการซึ่งสามารถแทนที่ตัวจัดการเหตุการณ์ 6 ตัว (OnReady, Oncropstart, Oncropmove, Oncropend, Oncrop, Onzoom) 

 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 Event Handlers:

ImageObject

  • ประเภท: Object

อ้างอิงถึงองค์ประกอบการปลูกพืชพื้นฐาน

เหตุการณ์

  • ประเภท: CustomEvent

เป็นตัวแทนของเหตุการณ์ Cropper

ความสัมพันธ์

  • ประเภท: String
  • ค่าเริ่มต้น: Cropper.Blazor

ID สหสัมพันธ์เป็นตัวระบุที่ไม่ซ้ำกันซึ่งถูกเพิ่มเข้าไปในการโต้ตอบครั้งแรก (คำขอเข้ามา) เพื่อระบุบริบทและถูกส่งผ่านไปยังส่วนประกอบทั้งหมดที่เกี่ยวข้องกับการไหลของการทำธุรกรรม

จำเป็นต้องบอกกฎเหล่านี้อย่างแน่นอนใน 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. ส่งคำขอดึง: D
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด