cropperjs

cropper.js

JavaScript Image Cropper นี่คือสาขาสำหรับ v1.x สำหรับ v2.x ตรวจสอบสาขา v2

• เว็บไซต์
• Editor Photo - ตัวอย่างขั้นสูงของ cropper.js
• JQuery -Cropper - เครื่องห่อปลั๊กอิน jQuery สำหรับ cropper.js

สารบัญ

• คุณสมบัติ
• หลัก
• เริ่มต้น
• ตัวเลือก
• วิธีการ
• เหตุการณ์
• ไม่มีความขัดแย้ง
• การสนับสนุนเบราว์เซอร์
• การบริจาค
• การกำหนดเวอร์ชัน
• ใบอนุญาต

คุณสมบัติ

• รองรับ 39 ตัวเลือก
• รองรับ 27 วิธี
• สนับสนุน 6 เหตุการณ์
• รองรับการสัมผัส (มือถือ)
• รองรับการซูม
• รองรับการหมุน
• รองรับการปรับขนาด (พลิก)
• รองรับ Croppers หลายตัว
• รองรับการครอบตัดบนผืนผ้าใบ
• รองรับการครอบตัดภาพบนเบราว์เซอร์โดยผืนผ้าใบ
• สนับสนุนการแปลข้อมูลการปฐมนิเทศ Exif
• การสนับสนุนข้ามเบราว์เซอร์

ไฟล์หลัก

 dist/
├── cropper.css
├── cropper.min.css   (compressed)
├── cropper.js        (UMD)
├── cropper.min.js    (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js    (ES Module)

เริ่มต้น

การติดตั้ง

npm install cropperjs

ในเบราว์เซอร์:

 < link  href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >

CDNJS ให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ cropper.js คุณสามารถค้นหาลิงค์ได้ที่นี่

การใช้งาน

ไวยากรณ์

 new Cropper ( element [ , options ] )

• องค์ประกอบ

  • ประเภท: HTMLImageElement หรือ HTMLCanvasElement
  • ภาพเป้าหมายหรือองค์ประกอบผ้าใบสำหรับการปลูกพืช

• ตัวเลือก (ไม่บังคับ)

  • ประเภท: Object
  • ตัวเลือกสำหรับการปลูกพืช ตรวจสอบตัวเลือกที่มีอยู่

ตัวอย่าง

 <!-- Wrap the image or canvas element with a block element (container) -->
< div >
  < img id =" image " src =" picture.jpg " >
</ div > 

 /* Make sure the size of the image fits perfectly into the container */
img {
  display : block;

  /* This rule is very important, please don't ignore this */
  max-width : 100 % ;
}

 // import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs' ;

const image = document . getElementById ( 'image' ) ;
const cropper = new Cropper ( image , {
  aspectRatio : 16 / 9 ,
  crop ( event ) {
    console . log ( event . detail . x ) ;
    console . log ( event . detail . y ) ;
    console . log ( event . detail . width ) ;
    console . log ( event . detail . height ) ;
    console . log ( event . detail . rotate ) ;
    console . log ( event . detail . scaleX ) ;
    console . log ( event . detail . scaleY ) ;
  } ,
} ) ; 

คำถามที่พบบ่อย

วิธีการครอบตัดพื้นที่ใหม่หลังจากซูมเข้าหรือซูมออก?

เพียงดับเบิลคลิกที่เมาส์ของคุณเพื่อเข้าสู่โหมดการครอบตัด

จะย้ายภาพหลังจากปลูกพืชได้อย่างไร?

เพียงดับเบิลคลิกที่เมาส์ของคุณเพื่อเข้าสู่โหมดการย้าย

วิธีแก้ไขอัตราส่วนภาพในโหมดอัตราส่วนฟรี?

เพียงแค่กดปุ่ม Shift เมื่อคุณปรับขนาดกล่องพืช

วิธีการครอบตัดพื้นที่สี่เหลี่ยมในโหมดอัตราส่วนฟรี?

เพียงแค่กดปุ่ม Shift เมื่อคุณครอบตัดบนภาพ

หมายเหตุ

• ขนาดของ cropper สืบทอดมาจากขนาดขององค์ประกอบหลักของภาพ (wrapper) ดังนั้นอย่าลืมห่อภาพด้วย องค์ประกอบบล็อกที่มองเห็นได้

  หากคุณใช้ cropper ใน modal คุณควรเริ่มต้นการปลูกพืชหลังจากที่ modal จะแสดงอย่างสมบูรณ์ มิฉะนั้นคุณจะไม่ได้รับการปลูกพืชที่ถูกต้อง

• ข้อมูลที่ถูกครอบตัดออกมานั้นขึ้นอยู่กับขนาดภาพดั้งเดิมดังนั้นคุณสามารถใช้มันเพื่อครอบตัดภาพโดยตรง

• หากคุณพยายามเริ่มต้นการปลูกพืชบนภาพข้ามต้นกำเนิดโปรดตรวจสอบให้แน่ใจว่าเบราว์เซอร์ของคุณรองรับแอตทริบิวต์การตั้งค่า HTML5 CORS และเซิร์ฟเวอร์รูปภาพของคุณรองรับตัวเลือกการควบคุม Access-Control-Allow-Origin (ดู HTTP Access Control (CORS)

ปัญหาที่รู้จัก

• ข้อ จำกัด ของทรัพยากร iOS ที่รู้จักกันดี: เนื่องจากอุปกรณ์ iOS จำกัด หน่วยความจำเบราว์เซอร์อาจผิดพลาดเมื่อคุณกำลังครอบตัดภาพขนาดใหญ่ (ความละเอียดของกล้อง iPhone) เพื่อหลีกเลี่ยงสิ่งนี้คุณสามารถปรับขนาดภาพก่อน (ควรต่ำกว่า 1024 พิกเซล) ก่อนเริ่มต้นปลูก

• ขนาดภาพที่รู้จักเพิ่มขึ้น: เมื่อส่งออกภาพที่ถูกครอบตัดทางด้านเบราว์เซอร์ด้วยวิธี HTMLCanvasElement.toDataURL ขนาดของภาพที่ส่งออกอาจมากกว่าภาพต้นฉบับ นี่เป็นเพราะประเภทของภาพที่ส่งออกไม่เหมือนกับภาพต้นฉบับ ดังนั้นเพียงแค่ผ่านประเภทของภาพต้นฉบับเป็นพารามิเตอร์แรกไปยัง toDataURL เพื่อแก้ไขปัญหานี้ ตัวอย่างเช่นหากประเภทดั้งเดิมคือ jpeg ให้ใช้ cropper.getCroppedCanvas().toDataURL('image/jpeg') เพื่อส่งออกภาพ

⬆กลับไปด้านบน

ตัวเลือก

คุณสามารถตั้งค่าตัวเลือกการปลูกพืชด้วย new Cropper(image, options) หากคุณต้องการเปลี่ยนตัวเลือกเริ่มต้นทั่วโลกคุณสามารถใช้ Cropper.setDefaults(options)

ViewMode

• ประเภท: Number
• ค่าเริ่มต้น: 0
• ตัวเลือก:
  • 0 : ไม่มีข้อ จำกัด
  • 1 : จำกัด กล่องพืชไม่เกินขนาดของผืนผ้าใบ
  • 2 : จำกัด ขนาดผืนผ้าใบขั้นต่ำให้พอดีภายในคอนเทนเนอร์ หากสัดส่วนของผืนผ้าใบและภาชนะแตกต่างกันผ้าใบขั้นต่ำจะถูกล้อมรอบด้วยพื้นที่พิเศษในหนึ่งในมิติ
  • 3 : จำกัด ขนาดผ้าใบขั้นต่ำเพื่อเติมเต็มพอดีกับภาชนะ หากสัดส่วนของผืนผ้าใบและคอนเทนเนอร์แตกต่างกันคอนเทนเนอร์จะไม่สามารถพอดีกับผ้าใบทั้งหมดในหนึ่งมิติ

กำหนดโหมดมุมมองของ cropper หากคุณตั้ง viewMode เป็น 0 กล่องครอบตัดสามารถขยายออกไปนอกผืนผ้าใบในขณะที่ค่า 1 , 2 หรือ 3 จะ จำกัด กล่องการเพาะปลูกให้เป็นขนาดของผืนผ้าใบ viewMode ของ 2 หรือ 3 จะ จำกัด ผืนผ้าใบไปยังคอนเทนเนอร์เพิ่มเติม ไม่มีความแตกต่างระหว่าง 2 และ 3 เมื่อสัดส่วนของผืนผ้าใบและคอนเทนเนอร์เหมือนกัน

Dragmode

• ประเภท: String
• ค่าเริ่มต้น: 'crop'
• ตัวเลือก:
  • 'crop' : สร้างกล่องพืชใหม่
  • 'move' : เลื่อนผืนผ้าใบ
  • 'none' : ไม่ทำอะไรเลย

กำหนดโหมดการลากของ cropper

initialaspectratio

• ประเภท: Number
• ค่าเริ่มต้น: NaN

กำหนดอัตราส่วนเริ่มต้นของกล่องพืช โดยค่าเริ่มต้นมันจะเหมือนกับอัตราส่วนภาพของผืนผ้าใบ (Wrapper ภาพ)

มีเฉพาะเมื่อตัวเลือก aspectRatio ถูกตั้งค่าเป็น NaN

แอสเพอร์ทราทิโอ

• ประเภท: Number
• ค่าเริ่มต้น: NaN

กำหนดอัตราส่วนภาพคงที่ของกล่องพืช โดยค่าเริ่มต้นกล่องพืชมีอัตราส่วนฟรี

ข้อมูล

• ประเภท: Object
• ค่าเริ่มต้น: null

ข้อมูลที่ถูกครอบตัดก่อนหน้านี้ที่คุณเก็บไว้จะถูกส่งผ่านไปยังเมธอด setData โดยอัตโนมัติเมื่อเริ่มต้น

ใช้ได้เฉพาะเมื่อตัวเลือก autoCrop ตั้งค่าเป็น true

ดูตัวอย่าง

• ประเภท: Element , Array (องค์ประกอบ), NodeList หรือ String (ตัวเลือก)
• ค่าเริ่มต้น: ''
• องค์ประกอบหรืออาร์เรย์ขององค์ประกอบหรือวัตถุรายการโหนดหรือตัวเลือกที่ถูกต้องสำหรับ document.querySelectorall

เพิ่มองค์ประกอบพิเศษ (คอนเทนเนอร์) สำหรับตัวอย่าง

หมายเหตุ:

• ความกว้างสูงสุดคือความกว้างเริ่มต้นของคอนเทนเนอร์ตัวอย่าง
• ความสูงสูงสุดคือความสูงเริ่มต้นของคอนเทนเนอร์ตัวอย่าง
• หากคุณตั้งค่าตัวเลือก aspectRatio ให้แน่ใจว่าได้ตั้งค่าอัตราส่วนภาพเดียวกันกับคอนเทนเนอร์ตัวอย่าง
• หากตัวอย่างแสดงไม่ถูกต้องตั้งค่า overflow: hidden ในคอนเทนเนอร์ตัวอย่าง

ตอบสนอง

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดงผลใหม่อีกครั้งเมื่อปรับขนาดหน้าต่าง

คืนค่า

• ประเภท: Boolean
• ค่าเริ่มต้น: true

กู้คืนพื้นที่ที่ถูกครอบตัดหลังจากปรับขนาดหน้าต่าง

checkcrossorigin

• ประเภท: Boolean
• ค่าเริ่มต้น: true

ตรวจสอบว่าภาพปัจจุบันเป็นภาพข้ามต้นกำเนิดหรือไม่

ถ้าเป็นเช่นนั้นแอตทริบิวต์ crossOrigin จะถูกเพิ่มลงในองค์ประกอบภาพที่โคลนและพารามิเตอร์การประทับเวลาจะถูกเพิ่มลงในแอตทริบิวต์ src เพื่อโหลดภาพต้นทางซ้ำเพื่อหลีกเลี่ยงข้อผิดพลาดแคชเบราว์เซอร์

การเพิ่มแอตทริบิวต์ crossOrigin ลงในองค์ประกอบภาพจะหยุดเพิ่มการประทับเวลาลงใน URL รูปภาพและหยุดการโหลดภาพใหม่ แต่คำขอ (XMLHTTPREQUEST) ในการอ่านข้อมูลภาพสำหรับการตรวจสอบการปฐมนิเทศจะต้องใช้การประทับเวลาเพื่อจับแคชเพื่อหลีกเลี่ยงข้อผิดพลาดแคชเบราว์เซอร์ คุณสามารถตั้งค่าตัวเลือก checkOrientation เป็น false เพื่อยกเลิกคำขอนี้

หากค่าของแอตทริบิวต์ crossOrigin ของภาพคือ "use-credentials" แอตทริบิวต์ withCredentials จะตั้งค่าเป็น true เมื่ออ่านข้อมูลภาพโดย XMLHTTPREQUEST

การตรวจสอบ

• ประเภท: Boolean
• ค่าเริ่มต้น: true

ตรวจสอบข้อมูลการวางแนว Exif ของภาพปัจจุบัน โปรดทราบว่ามีเพียงภาพ JPEG เท่านั้นที่มีข้อมูลการวางแนว EXIF

อ่านค่าการปฐมนิเทศสำหรับการหมุนหรือพลิกภาพจากนั้นแทนที่ค่าการวางแนวด้วย 1 (ค่าเริ่มต้น) เพื่อหลีกเลี่ยงปัญหาบางอย่าง (1, 2) บนอุปกรณ์ iOS

ต้องตั้งค่าทั้งตัวเลือก rotatable และ scalable ให้เป็น true ในเวลาเดียวกัน

หมายเหตุ: อย่าไว้วางใจสิ่งนี้ตลอดเวลาเนื่องจากภาพ JPG บางภาพอาจมีค่าการปฐมนิเทศที่ไม่ถูกต้อง (ไม่ได้มาตรฐาน)

ต้องการการสนับสนุนอาร์เรย์ที่พิมพ์ (เช่น 10+)

เป็นโมฆะ

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดง Modal สีดำเหนือภาพและใต้กล่องพืช

คำแนะนำ

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดงเส้นประเหนือกล่องพืช

ศูนย์

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดงตัวบ่งชี้กลางด้านบนกล่องพืช

เน้น

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดงโมดัลสีขาวเหนือกล่องพืช (เน้นกล่องพืช)

พื้นหลัง

• ประเภท: Boolean
• ค่าเริ่มต้น: true

แสดงพื้นหลังกริดของคอนเทนเนอร์

autocrop

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานการครอบตัดภาพโดยอัตโนมัติเมื่อเริ่มต้น

autocroparea

• ประเภท: Number
• ค่าเริ่มต้น: 0.8 (80% ของภาพ)

ควรเป็นตัวเลขระหว่าง 0 ถึง 1 กำหนดขนาดพื้นที่การปลูกพืชอัตโนมัติ (เปอร์เซ็นต์)

เคลื่อนย้ายได้

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อย้ายภาพ

หมุนได้

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานการหมุนภาพ

ปรับขนาดได้

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อปรับขนาดภาพ

ซูมได้

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อซูมภาพ

ซูม

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อซูมภาพโดยการลากสัมผัส

Zoomonwheel

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อซูมภาพด้วยการล้อเลื่อนของเมาส์

Wheelzoomratio

• ประเภท: Number
• ค่าเริ่มต้น: 0.1

กำหนดอัตราส่วนการซูมเมื่อซูมภาพโดยใช้ล้อเมาส์

cropboxmovable

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อย้ายกล่องครอบตัดโดยการลาก

cropboxresizable

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานเพื่อปรับขนาดกล่องพืชโดยการลาก

ToggledRagmodeondblclick

• ประเภท: Boolean
• ค่าเริ่มต้น: true

เปิดใช้งานโหมดการลากสลับระหว่าง "crop" และ "move" เมื่อคลิกสองครั้งบน cropper

ต้องการการสนับสนุนเหตุการณ์ dblclick

mincontainerwidth

• ประเภท: Number
• ค่าเริ่มต้น: 200

ความกว้างขั้นต่ำของภาชนะ

MincontainerHeight

• ประเภท: Number
• ค่าเริ่มต้น: 100

ความสูงต่ำสุดของภาชนะ

Mincanvaswidth

• ประเภท: Number
• ค่าเริ่มต้น: 0

ความกว้างขั้นต่ำของผืนผ้าใบ (ภาพห่อภาพ)

Mincanvasheight

• ประเภท: Number
• ค่าเริ่มต้น: 0

ความสูงต่ำสุดของผืนผ้าใบ (ภาพห่อภาพ)

MincropboxWidth

• ประเภท: Number
• ค่าเริ่มต้น: 0

ความกว้างขั้นต่ำของกล่องพืช

หมายเหตุ: ขนาดนี้สัมพันธ์กับหน้าไม่ใช่ภาพ

mincropboxheight

• ประเภท: Number
• ค่าเริ่มต้น: 0

ความสูงขั้นต่ำของกล่องพืช

หมายเหตุ: ขนาดนี้สัมพันธ์กับหน้าไม่ใช่ภาพ

พร้อม

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดสู่เหตุการณ์ ready

การปลูกพืชไม้

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดไปยังเหตุการณ์ cropstart

การปลูกพืช

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดไปยังกิจกรรม cropmove

พืชผล

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดไปยังเหตุการณ์ cropend

พืชผล

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดไปยังเหตุการณ์ crop

ซูม

• ประเภท: Function
• ค่าเริ่มต้น: null

ทางลัดไปยังเหตุการณ์ zoom

⬆กลับไปด้านบน

วิธีการ

เนื่องจากมีกระบวนการ แบบอะซิงโครนัส เมื่อโหลดภาพคุณ ควรเรียกใช้วิธีการส่วนใหญ่หลังจากพร้อม ยกเว้น setAspectRatio replace และ destroy

หากวิธีการไม่จำเป็นต้องส่งคืนค่าใด ๆ มันจะส่งคืนอินสแตนซ์ของ Cropper ( this ) สำหรับองค์ประกอบโซ่

 new Cropper ( image , {
  ready ( ) {
    // this.cropper[method](argument1, , argument2, ..., argumentN);
    this . cropper . move ( 1 , - 1 ) ;

    // Allows chain composition
    this . cropper . move ( 1 , - 1 ) . rotate ( 45 ) . scale ( 1 , - 1 ) ;
  } ,
} ) ;

พืชผล ()

แสดงกล่องพืชด้วยตนเอง

 new Cropper ( image , {
  autoCrop : false ,
  ready ( ) {
    // Do something here
    // ...

    // And then
    this . cropper . crop ( ) ;
  } ,
} ) ;

รีเซ็ต ()

รีเซ็ตภาพและกล่องพืชเป็นสถานะเริ่มต้น

ชัดเจน()

ล้างกล่องพืช

แทนที่ (url [, hassamesize])

• URL :

  • ประเภท: String
  • URL ภาพใหม่

• hassamesize (ไม่บังคับ):

  • ประเภท: Boolean
  • ค่าเริ่มต้น: false
  • หากภาพใหม่มีขนาดเท่ากันกับภาพเก่ามันจะไม่สร้างการปลูกพืชและอัปเดตเฉพาะ URL ของภาพที่เกี่ยวข้องทั้งหมด สามารถใช้สำหรับการใช้ตัวกรอง

แทนที่ SRC ของภาพและสร้าง Cropper ใหม่

เปิดใช้งาน()

เปิดใช้งาน (unfreeze) cropper

ปิดการใช้งาน ()

ปิดการใช้งาน (แช่แข็ง) ผู้ปลูก

ทำลาย()

ทำลาย cropper และลบอินสแตนซ์ออกจากภาพ

ย้าย (Offsetx [adsetety]))

• Offsetx :

  • ประเภท: Number
  • ขนาดที่เคลื่อนที่ (PX) ในทิศทางแนวนอน

• อวกาศ (ไม่บังคับ):

  • ประเภท: Number
  • ขนาดที่เคลื่อนที่ (PX) ในทิศทางแนวตั้ง
  • หากไม่ปรากฏค่าเริ่มต้นของค่าเริ่มต้นคือ offsetX

ย้ายผ้าใบ (ภาพห่อหุ้มภาพ) ด้วยการชดเชยสัมพัทธ์

 cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;

moveto (x [, y])

• X :

  • ประเภท: Number
  • ค่า left ของผืนผ้าใบ

• y (ไม่บังคับ):

  • ประเภท: Number
  • ค่า top ของผ้าใบ
  • หากไม่ปรากฏค่าเริ่มต้นของค่าเริ่มต้นคือ x

ย้ายผ้าใบ (ภาพห่อหุ้มภาพ) ไปยังจุดสัมบูรณ์

ซูม (อัตราส่วน)

• อัตราส่วน :
  • ประเภท: Number
  • ซูมเข้า: ต้องมีจำนวนบวก (อัตราส่วน> 0)
  • ซูมออก: ต้องใช้จำนวนลบ (อัตราส่วน <0)

ซูมผืนผ้าใบ (wrapper ภาพ) ด้วยอัตราส่วนสัมพัทธ์

 cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;

zoomto (อัตราส่วน [, pivot])

• อัตราส่วน :

  • ประเภท: Number
  • ต้องใช้จำนวนบวก (อัตราส่วน> 0)

• Pivot (ไม่บังคับ):

  • ประเภท: Object
  • Schema: { x: Number, y: Number }
  • พิกัดของจุดกึ่งกลางสำหรับการซูมฐานที่มุมซ้ายบนของภาชนะบรรจุ

ซูมผืนผ้าใบ (Wrapper ภาพ) เป็นอัตราส่วนสัมบูรณ์

 cropper . zoomTo ( 1 ) ; // 1:1 (canvasData.width === canvasData.naturalWidth)

const containerData = cropper . getContainerData ( ) ;

// Zoom to 50% from the center of the container.
cropper . zoomTo ( .5 , {
  x : containerData . width / 2 ,
  y : containerData . height / 2 ,
} ) ;

หมุน (องศา)

• ระดับ :
  • ประเภท: Number
  • หมุนขวา: ต้องการจำนวนบวก (ระดับ> 0)
  • หมุนไปทางซ้าย: ต้องมีจำนวนลบ (องศา <0)

หมุนภาพในระดับสัมพัทธ์

ต้องใช้การสนับสนุนการแปลง CSS3 2D (เช่น 9+)

 cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;

Rotateto (องศา)

• ระดับ :
  • ประเภท: Number

หมุนภาพให้อยู่ในระดับที่แน่นอน

สเกล (scalex [, scaley])

• Scalex :

  • ประเภท: Number
  • ค่าเริ่มต้น: 1
  • ปัจจัยการปรับขนาดใช้กับ abscissa ของภาพ
  • เมื่อเท่ากับ 1 มันไม่ได้ทำอะไรเลย

• Scaley (ไม่บังคับ):

  • ประเภท: Number
  • ปัจจัยการปรับขนาดที่จะนำไปใช้กับการกำหนดภาพ
  • หากไม่ปรากฏค่าเริ่มต้นของค่าเริ่มต้นคือ scaleX

ขยายภาพ

ต้องใช้การสนับสนุนการแปลง CSS3 2D (เช่น 9+)

 cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip vertical

scalex (scalex)

• Scalex :
  • ประเภท: Number
  • ค่าเริ่มต้น: 1
  • ปัจจัยการปรับขนาดใช้กับ abscissa ของภาพ
  • เมื่อเท่ากับ 1 มันไม่ได้ทำอะไรเลย

ขยาย abscissa ของภาพ

Scaley (Scaley)

• Scaley :
  • ประเภท: Number
  • ค่าเริ่มต้น: 1
  • ปัจจัยการปรับขนาดที่จะนำไปใช้กับการกำหนดภาพ
  • เมื่อเท่ากับ 1 มันไม่ได้ทำอะไรเลย

ปรับแต่งการกำหนดภาพ

getData ([โค้งมน])

• โค้งมน (ไม่บังคับ):

  • ประเภท: Boolean
  • ค่าเริ่มต้น: false
  • ตั้ง true เพื่อรับค่าโค้งมน

• (ค่าส่งคืน):

  • ประเภท: Object
  • คุณสมบัติ:
    • x : ออฟเซ็ตซ้ายของพื้นที่ที่ถูกครอบตัด
    • y : ด้านบนชดเชยของพื้นที่ที่ถูกครอบตัด
    • width : ความกว้างของพื้นที่ที่ถูกครอบตัด
    • height : ความสูงของพื้นที่ครอบตัด
    • rotate : องศาที่หมุนได้ของภาพ
    • scaleX : ปัจจัยการปรับขนาดที่จะนำไปใช้กับ abscissa ของภาพ
    • scaleY : ปัจจัยการปรับขนาดที่จะนำไปใช้กับการกำหนดภาพ

เอาต์พุตตำแหน่งและข้อมูลขนาดพื้นที่ที่ถูกครอบตัดขั้นสุดท้าย (ขึ้นอยู่กับขนาดธรรมชาติของภาพต้นฉบับ)

คุณสามารถส่งข้อมูลไปยังฝั่งเซิร์ฟเวอร์เพื่อครอบตัดภาพได้โดยตรง:

1. หมุนภาพด้วยคุณสมบัติ rotate
2. ปรับขนาดภาพด้วยคุณสมบัติ scaleX และ scaleY
3. ครอบตัดภาพด้วยคุณสมบัติ x , y , width และ height

setData (ข้อมูล)

• ข้อมูล :
  • ประเภท: Object
  • คุณสมบัติ: ดูวิธี getData
  • คุณอาจต้องปัดคุณสมบัติข้อมูลก่อนที่จะส่งผ่าน

เปลี่ยนตำแหน่งพื้นที่และขนาดที่ครอบตัดด้วยข้อมูลใหม่ (ขึ้นอยู่กับภาพต้นฉบับ)

หมายเหตุ: วิธีนี้จะใช้ได้เฉพาะเมื่อค่าของตัวเลือก viewMode มากกว่าหรือเท่ากับ 1

getContainerData ()

• (ค่าส่งคืน):
  • ประเภท: Object
  • คุณสมบัติ:
    • width : ความกว้างปัจจุบันของคอนเทนเนอร์
    • height : ความสูงปัจจุบันของภาชนะ

เอาต์พุตข้อมูลขนาดคอนเทนเนอร์

getImagedata ()

• (ค่าส่งคืน):
  • ประเภท: Object
  • คุณสมบัติ:
    • left : ออฟเซ็ตซ้ายของภาพ
    • top : ด้านบนชดเชยของภาพ
    • width : ความกว้างของภาพ
    • height : ความสูงของภาพ
    • naturalWidth : ความกว้างตามธรรมชาติของภาพ
    • naturalHeight : ความสูงตามธรรมชาติของภาพ
    • aspectRatio : อัตราส่วนภาพของภาพ
    • rotate : องศาที่หมุนได้ถ้ามันหมุน
    • scaleX : ปัจจัยการปรับขนาดที่จะนำไปใช้กับ abscissa ของภาพถ้าปรับขนาด
    • scaleY : ปัจจัยการปรับขนาดที่จะนำไปใช้กับการกำหนดภาพถ้าปรับขนาด

ส่งออกตำแหน่งภาพขนาดและข้อมูลอื่น ๆ ที่เกี่ยวข้อง

getCanvasdata ()

• (ค่าส่งคืน):
  • ประเภท: Object
  • คุณสมบัติ:
    • left : ออฟเซ็ตซ้ายของผืนผ้าใบ
    • top : ด้านบนชดเชยของผืนผ้าใบ
    • width : ความกว้างของผืนผ้าใบ
    • height : ความสูงของผืนผ้าใบ
    • naturalWidth : ความกว้างตามธรรมชาติของผืนผ้าใบ (อ่านเท่านั้น)
    • naturalHeight : ความสูงตามธรรมชาติของผืนผ้าใบ (อ่านเท่านั้น)

เอาต์พุตข้อมูลตำแหน่งและขนาดของภาพ) และข้อมูลขนาด)

 const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;

if ( imageData . rotate % 180 === 0 ) {
  console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
  // > true
}

SetCanvasdata (ข้อมูล)

• ข้อมูล :
  • ประเภท: Object
  • คุณสมบัติ:
    • left : ชดเชยใหม่ซ้ายของผืนผ้าใบ
    • top : ด้านบนชดเชยใหม่ของผืนผ้าใบ
    • width : ความกว้างใหม่ของผืนผ้าใบ
    • height : ความสูงใหม่ของผืนผ้าใบ

เปลี่ยนตำแหน่งและขนาดของภาพห่อหุ้มภาพ) และขนาดด้วยข้อมูลใหม่

getCropBoxData ()

• (ค่าส่งคืน):
  • ประเภท: Object
  • คุณสมบัติ:
    • left : ออฟเซ็ตซ้ายของกล่องพืช
    • top : ด้านบนชดเชยของกล่องพืช
    • width : ความกว้างของกล่องพืช
    • height : ความสูงของกล่องพืช

เอาต์พุตตำแหน่งกล่องพืชและข้อมูลขนาด

SetCropBoxData (ข้อมูล)

• ข้อมูล :
  • ประเภท: Object
  • คุณสมบัติ:
    • left : ออฟเซ็ตใหม่ซ้ายของกล่องพืช
    • top : ด้านบนชดเชยใหม่ของกล่องพืช
    • width : ความกว้างใหม่ของกล่องพืช
    • height : ความสูงใหม่ของกล่องพืช

เปลี่ยนตำแหน่งกล่องพืชและขนาดด้วยข้อมูลใหม่

getcroppedcanvas ([ตัวเลือก])

• ตัวเลือก (ไม่บังคับ):

  • ประเภท: Object
  • คุณสมบัติ:
    • width : ความกว้างปลายทางของผืนผ้าใบเอาต์พุต
    • height : ความสูงปลายทางของผืนผ้าใบเอาต์พุต
    • minWidth : ความกว้างปลายทางขั้นต่ำของผืนผ้าใบเอาต์พุตค่าเริ่มต้นคือ 0
    • minHeight : ความสูงปลายทางขั้นต่ำของผ้าใบเอาต์พุตค่าเริ่มต้นคือ 0
    • maxWidth : ความกว้างปลายทางสูงสุดของผืนผ้าใบเอาต์พุตค่าเริ่มต้นคือ Infinity
    • maxHeight : ความสูงปลายทางสูงสุดของผืนผ้าใบเอาต์พุตค่าเริ่มต้นคือ Infinity
    • fillColor : สีเพื่อเติมค่าอัลฟ่าใด ๆ ในผืนผ้าใบเอาต์พุตค่าเริ่มต้นคือ transparent
    • imageSmoothingEnabled : ตั้งค่าเป็นเปลี่ยนหากรูปภาพราบรื่น ( true เริ่มต้น) หรือไม่ ( false )
    • imageSmoothingQuality : ตั้งค่าคุณภาพของการปรับให้เรียบของภาพหนึ่งใน "ต่ำ" (ค่าเริ่มต้น), "ปานกลาง" หรือ "สูง"
    • rounded : ตั้ง true เพื่อใช้ค่าโค้งมน (ข้อมูลตำแหน่งและขนาดพื้นที่ที่ถูกครอบตัด) ค่าเริ่มต้นเป็น false

• (ค่าส่งคืน):

  • ประเภท: HTMLCanvasElement
  • ผืนผ้าใบวาดภาพที่ถูกครอบตัด

• หมายเหตุ:

  • อัตราส่วนภาพของผ้าใบเอาท์พุทจะถูกปรับให้เข้ากับอัตราส่วนภาพของกล่องพืชโดยอัตโนมัติ
  • หากคุณตั้งใจจะรับภาพ JPEG จากผืนผ้าใบเอาท์พุทคุณควรตั้งค่าตัวเลือก fillColor ก่อนหากไม่ได้ส่วนโปร่งใสในภาพ JPEG จะกลายเป็นสีดำโดยค่าเริ่มต้น
  • ใช้ผืนผ้าใบดั้งเดิมของเบราว์เซอร์ Toblob API เพื่อทำงานบีบอัดซึ่งหมายความว่าเป็นการ บีบอัดที่สูญเสียไป เพื่อคุณภาพของภาพที่ดีขึ้นคุณสามารถอัปโหลดภาพต้นฉบับและข้อมูลที่ถูกครอบตัดไปยังเซิร์ฟเวอร์และทำงานพืชบนเซิร์ฟเวอร์

• การสนับสนุนเบราว์เซอร์:

  • ภาพพื้นฐาน: ต้องการการสนับสนุน Canvas (เช่น 9+)
  • ภาพหมุน: ต้องใช้การสนับสนุนการแปลง CSS3 2D (เช่น 9+)
  • ภาพข้ามแหล่งกำเนิด: ต้องใช้ HTML5 CORS การตั้งค่าการตั้งค่าแอตทริบิวต์ (เช่น 11+)

รับผ้าใบที่ดึงมาจากภาพที่ถูกครอบตัด (การบีบอัดสูญเสีย) หากไม่ได้ถูกครอบตัดให้ส่งคืนผืนผ้าใบที่วาดทั้งภาพ

หลังจากนั้นคุณสามารถแสดงผืนผ้าใบเป็นภาพได้โดยตรงหรือใช้ htmlcanvaselement.todataurl เพื่อรับ URL ข้อมูลหรือใช้ htmlcanvaselement.toblob เพื่อรับ blob และอัปโหลดไปยังเซิร์ฟเวอร์ด้วย formdata หากเบราว์เซอร์รองรับ APIs เหล่านี้

หลีกเลี่ยงการได้รับภาพเอาต์พุตว่างเปล่า (หรือดำ) คุณอาจต้องตั้งค่าคุณสมบัติ maxWidth และ maxHeight เป็นจำนวน จำกัด เนื่องจากขีด จำกัด ขนาดขององค์ประกอบผ้าใบ นอกจากนี้คุณควร จำกัด อัตราส่วนการซูมสูงสุด (ในเหตุการณ์ zoom ) ด้วยเหตุผลเดียวกัน

 cropper . getCroppedCanvas ( ) ;

cropper . getCroppedCanvas ( {
  width : 160 ,
  height : 90 ,
} ) ;

cropper . getCroppedCanvas ( {
  minWidth : 256 ,
  minHeight : 256 ,
  maxWidth : 4096 ,
  maxHeight : 4096 ,
} ) ;

cropper . getCroppedCanvas ( {
  fillColor : '#fff' ,
  imageSmoothingEnabled : false ,
  imageSmoothingQuality : 'high' ,
} ) ;

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
// The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.
cropper . getCroppedCanvas ( ) . toBlob ( ( blob ) => {
  const formData = new FormData ( ) ;

  // Pass the image file name as the third parameter if necessary.
  formData . append ( 'croppedImage' , blob /*, 'example.png' */ ) ;

  // Use `jQuery.ajax` method for example
  $ . ajax ( '/path/to/upload' , {
    method : 'POST' ,
    data : formData ,
    processData : false ,
    contentType : false ,
    success ( ) {
      console . log ( 'Upload success' ) ;
    } ,
    error ( ) {
      console . log ( 'Upload error' ) ;
    } ,
  } ) ;
} /*, 'image/png' */ ) ;

Setaspectratio (aspectratio)

• Aspectratio :
  • ประเภท: Number
  • ต้องใช้จำนวนบวก

เปลี่ยนอัตราส่วนภาพของกล่องพืช

SetDragMode ([โหมด])

• โหมด (ไม่บังคับ):
  • ประเภท: String
  • ค่าเริ่มต้น: 'none'
  • ตัวเลือก: 'none' , 'crop' , 'move'

เปลี่ยนโหมดการลาก

เคล็ดลับ: คุณสามารถสลับโหมด "การครอบตัด" และ "ย้าย" ได้โดยการคลิกสองครั้งที่ครอปเปอร์

⬆กลับไปด้านบน

เหตุการณ์

พร้อม

เหตุการณ์นี้เกิดขึ้นเมื่อมีการโหลดอิมเมจเป้าหมายและอินสแตนซ์ Cropper พร้อมสำหรับการใช้งาน

 let cropper ;

image . addEventListener ( 'ready' , function ( ) {
  console . log ( this . cropper === cropper ) ;
  // > true
} ) ;

cropper = new Cropper ( image ) ;

การปลูกพืชไม้

• Event.detail.originalEvent :

  • ประเภท: Event
  • ตัวเลือก: pointerdown , touchstart และ mousedown

• Event.detail.action :

  • ประเภท: String
  • ตัวเลือก:
    • 'crop' : สร้างกล่องพืชใหม่
    • 'move' : เลื่อนผืนผ้าใบ (Wrapper ภาพ)
    • 'zoom' : ซูมเข้า / ออกผืนผ้าใบ (ภาพห่อภาพ) ด้วยการสัมผัส
    • 'e' : ปรับขนาดด้านตะวันออกของกล่องพืช
    • 'w' : ปรับขนาดฝั่งตะวันตกของกล่องพืช
    • 's' : ปรับขนาดด้านทิศใต้ของกล่องพืช
    • 'n' : ปรับขนาดทางด้านทิศเหนือของกล่องพืช
    • 'se' : ปรับขนาดด้านตะวันออกเฉียงใต้ของกล่องพืช
    • 'sw' : ปรับขนาดด้านตะวันตกเฉียงใต้ของกล่องพืช
    • 'ne' : ปรับขนาดด้านตะวันออกเฉียงเหนือของกล่องพืช
    • 'nw' : ปรับขนาดด้านตะวันตกเฉียงเหนือของกล่องพืช
    • 'all' : เลื่อนกล่องพืช (ทุกทิศทาง)

เหตุการณ์นี้เกิดขึ้นเมื่อผืนผ้าใบ (Wrapper ภาพ) หรือกล่องครอบตัดเริ่มเปลี่ยน

 image . addEventListener ( 'cropstart' , ( event ) => {
  console . log ( event . detail . originalEvent ) ;
  console . log ( event . detail . action ) ;
} ) ;

การปลูกพืช

• Event.detail.originalEvent :

  • ประเภท: Event
  • ตัวเลือก: pointermove , touchmove และ mousemove

• Event.detail.action : เช่นเดียวกับ "cropstart"

เหตุการณ์นี้เกิดขึ้นเมื่อผืนผ้าใบ (Wrapper ภาพ) หรือกล่องครอบตัดกำลังเปลี่ยนแปลง

พืชผล

• Event.detail.originalEvent :

  • ประเภท: Event
  • ตัวเลือก: pointerup , pointercancel , touchend , touchcancel และ mouseup

• Event.detail.action : เช่นเดียวกับ "cropstart"

เหตุการณ์นี้เกิดขึ้นเมื่อผืนผ้าใบ (Wrapper ภาพ) หรือกล่องครอบตัดหยุดเปลี่ยน

พืชผล

• Event.detail.x
• Event.detail.y
• event.detail.width
• Event.detail.height
• Event.detail.rotate
• Event.detail.scalex
• Event.detail.scaley

เกี่ยวกับคุณสมบัติเหล่านี้ดูวิธี getData

เหตุการณ์นี้เกิดขึ้นเมื่อผืนผ้าใบ (Wrapper ภาพ) หรือกล่องครอบตัดเปลี่ยน

หมายเหตุ:

• เมื่อตัวเลือก autoCrop ถูกตั้งค่าเป็น true เหตุการณ์ crop จะถูกเรียกใช้ก่อนเหตุการณ์ ready
• เมื่อตั้งค่าตัวเลือก data เหตุการณ์ crop อื่นจะถูกเรียกใช้ก่อนเหตุการณ์ ready

ซูม

• Event.detail.originalEvent :

  • ประเภท: Event
  • ตัวเลือก: wheel , pointermove , touchmove และ mousemove

• Event.detail.oldratio :

  • ประเภท: Number
  • อัตราส่วนเก่า (ปัจจุบัน) ของผืนผ้าใบ

• Event.detail.ratio :

  • ประเภท: Number
  • อัตราส่วนใหม่ (ถัดไป) ของผืนผ้าใบ ( canvasData.width / canvasData.naturalWidth )

เหตุการณ์นี้เกิดขึ้นเมื่ออินสแตนซ์ของผู้ปลูกพืชเริ่มซูมเข้าหรือซูมออกผ้าใบ (Wrapper ภาพ)

 image . addEventListener ( 'zoom' , ( event ) => {
  // Zoom in
  if ( event . detail . ratio > event . detail . oldRatio ) {
    event . preventDefault ( ) ; // Prevent zoom in
  }

  // Zoom out
  // ...
} ) ;

⬆กลับไปด้านบน

ไม่มีความขัดแย้ง

หากคุณต้องใช้ cropper อื่นที่มีเนมสเปซเดียวกันเพียงเรียกใช้วิธีการ Cropper.noConflict แบบคงที่เพื่อย้อนกลับไป

 < script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
  Cropper . noConflict ( ) ;
  // Code that uses other `Cropper` can follow here.
</ script > 

การสนับสนุนเบราว์เซอร์

• Chrome (ล่าสุด)
• Firefox (ล่าสุด)
• Safari (ล่าสุด)
• โอเปร่า (ล่าสุด)
• Edge (ล่าสุด)
• Internet Explorer 9+

การบริจาค

โปรดอ่านแนวทางการสนับสนุนของเรา

การกำหนดเวอร์ชัน

รักษาภายใต้แนวทางการกำหนดเวอร์ชันความหมาย

ใบอนุญาต

MIT © Chen Fengyuan

โครงการที่เกี่ยวข้อง

• Angular-Cropperjs โดย @matheusdavidson
• blazor-cropperjs โดย @coldforeign, @maxymgorn
• ember-cropperjs โดย @danielthall
• Iron-Cropper โดย @SafetyChanger
• react-cropper โดย @roadmanfong
• vue-cropperjs โดย @Agontuk
• symfony ux cropper.js โดย @symfony

⬆กลับไปด้านบน