ครอป

ครอปรูปภาพ ครอปรูปวงกลม

ปรับแต่ง

บีบอัดรูปภาพ เพิ่มความละเอียดด้วย AI ลบพื้นหลัง

แก้ไข

ย่อขยายรูปภาพ

แปลงไฟล์

อื่นๆ

รูปภาพเป็น PDF

ครอปรูปออนไลน์

ครอป JPG, PNG, WebP หรือ AVIF ในอัตราส่วน 1:1, 16:9, 9:16, 4:5, 3:2, 4:3 หรือกำหนดขนาดพิกเซลเอง

หรือลากภาพมาที่นี่

เกี่ยวกับเครื่องมือนี้

ครอปรูปภาพสี่เหลี่ยมในเบราว์เซอร์ได้ทันที ด้วยเครื่องมือ Araluma ที่ใช้ cropperjs v2 วางไฟล์ JPG, PNG, WebP หรือ AVIF ลงในหน้า แล้วพื้นที่ครอปจะเปิดขึ้นทันที ลากจุดจับเพื่อกำหนดตำแหน่งที่ต้องการ หรือล็อกอัตราส่วน เช่น 1:1, 16:9, 9:16, 4:5, 3:2 หรือ 4:3 แล้วพิมพ์ขนาดพิกเซลเองก็ได้ กรอบจะปรับอัตโนมัติตามค่าที่ใส่ หน้าจอแสดงขนาดเอาต์พุตจริงในหน่วยพิกเซลก่อนดาวน์โหลด รูปภาพของคุณอยู่บนอุปกรณ์ตลอดเวลา ไม่มีการส่งข้อมูลออกไปยังเซิร์ฟเวอร์ใด สามารถตรวจสอบได้จากแท็บ Network ใน DevTools ว่าไม่มี request ออกไปขณะครอป PNG และ WebP รักษาความโปร่งใสจากไฟล์ต้นฉบับ ส่วน JPG จะแทนพื้นที่โปร่งใสด้วยสีขาว ข้อมูล EXIF ถูกลบออกจากทุกไฟล์ที่ดาวน์โหลด เครื่องมือนี้เหมาะสำหรับทุกคนที่ต้องการครอปรูปสี่เหลี่ยมอย่างแม่นยำโดยไม่ต้องติดตั้งโปรแกรม ครั้งละหนึ่งไฟล์

ครอปรูป
วิธีใช้งานเครื่องมือครอปรูปในเบราว์เซอร์

วิธีใช้งานเครื่องมือครอปรูปในเบราว์เซอร์

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

ครอปรูป
ล็อกอัตราส่วนภาพหรือกำหนดพิกเซลเอง

ล็อกอัตราส่วนภาพหรือกำหนดพิกเซลเอง

แตะปุ่ม ratio chip (1:1 สำหรับสี่เหลี่ยมจัตุรัส, 16:9 สำหรับ widescreen, 9:16 สำหรับแนวตั้ง, 4:5, 3:2, 4:3 หรือ A4) แล้วกรอบเลือกจะล็อกในอัตราส่วนนั้น ลากกรอบไปวางบนรูปได้อิสระเพื่อเลือกส่วนที่ต้องการเก็บ ถ้าต้องการขนาดพิกเซลแน่นอน ให้พิมพ์ค่าความกว้างและความสูงลงในช่อง dimensions แล้วกรอบครอปจะปรับขนาดให้ตรง เอาต์พุตเท่ากับขนาด selection ในพิกเซลของไฟล์ต้นฉบับเสมอ เครื่องมือนี้ไม่ขยายภาพ ถ้า selection กว้าง 600 พิกเซล ไฟล์เอาต์พุตก็กว้าง 600 พิกเซล

ครอปรูป
JPG แทนพื้นหลังโปร่งใสด้วยสีขาว

JPG แทนพื้นหลังโปร่งใสด้วยสีขาว

ถ้าไฟล์ต้นฉบับมีพื้นที่โปร่งใส (PNG, WebP ที่มี alpha หรือ AVIF ที่มี alpha) แล้วคุณเลือก JPG เป็นรูปแบบเอาต์พุต พิกเซลโปร่งใสจะถูกแทนด้วยสีขาว เพราะ JPG ไม่มี alpha channel จึงไม่มีที่เก็บข้อมูลความโปร่งใส หากต้องการรักษาความโปร่งใส ให้เลือก PNG, WebP หรือ AVIF ใน format selector ในหน้าจบงาน PNG และ WebP จะส่งผ่าน alpha channel ต้นฉบับโดยไม่เปลี่ยนแปลง AVIF ก็รองรับ alpha เช่นกัน Format selector ติดป้ายกำกับแต่ละตัวเลือก ทำให้เห็นข้อแลกเปลี่ยนก่อนดาวน์โหลด

ครอปรูป
ย้ายพื้นที่ครอปด้วยคีย์บอร์ด

ย้ายพื้นที่ครอปด้วยคีย์บอร์ด

กด Tab เพื่อไปยังกรอบครอป จากนั้นใช้ปุ่มลูกศรเพื่อเลื่อน selection ทีละพิกเซล กด Shift ค้างไว้พร้อมลูกศร ก้าวจะเพิ่มเป็น 10 พิกเซล การควบคุมด้วยคีย์บอร์ดนี้สร้างไว้ใน cropperjs v2 เป็นฟังก์ชันดั้งเดิม ไม่ใช่ accessibility layer แยกต่างหาก มีประโยชน์เมื่อคุณต้องการการจัดวางระดับ sub-pixel ที่ trackpad ทำไม่ได้ หรือเมื่อทำงานในสภาพแวดล้อมที่ใช้แต่คีย์บอร์ด Selection ยังตอบสนองการสัมผัสบนมือถือด้วย จีบเพื่อซูม canvas แล้วลากมุม selection เพื่อจัดเฟรมใหม่ ทั้งสองกรณีไม่ต้องเปิดโหมดเพิ่มเติม

ครอปรูป
รูปแบบเอาต์พุต PNG, JPG, WebP และ AVIF

รูปแบบเอาต์พุต PNG, JPG, WebP และ AVIF

หลังครอป เลือกรูปแบบดาวน์โหลดในหน้าจบงาน PNG เป็นแบบไม่สูญเสียและรักษาความโปร่งใส JPG ใช้การบีบอัดแบบ lossy ที่คุณภาพ 0.9 เป็นค่าเริ่มต้น ซึ่งแยกความแตกต่างจากต้นฉบับด้วยตาเปล่าแทบไม่ได้ในรูปส่วนใหญ่ WebP สมดุลโหมด lossless และ lossy และรองรับความโปร่งใสด้วย AVIF เข้ารหัสผ่านไลบรารี @jsquash/avif ที่คุณภาพ 0.9 ให้ไฟล์เล็กที่สุดที่คุณภาพภาพเทียบเท่า แต่การเข้ารหัส AVIF ครั้งแรกในเซสชันต้องดาวน์โหลดโมดูล WASM ขนาด 870 KB ครั้งเดียว รูปแบบเอาต์พุตเริ่มต้นตรงกับ input ของคุณ PNG input จะ default เป็น PNG output, JPG input จะ default เป็น JPG output เปลี่ยนได้ทุกเมื่อในหน้าจบงาน

ครอปรูป
เมื่อไหร่ควรใช้เครื่องมือครอปอื่น

เมื่อไหร่ควรใช้เครื่องมือครอปอื่น

เครื่องมือนี้ครอปสี่เหลี่ยมเท่านั้น สี่เหลี่ยมจัตุรัส อัตราส่วนแนวนอน แนวตั้ง และขนาดพิกเซลกำหนดเอง สำหรับครอปวงกลม เช่น รูปโปรไฟล์ที่มีมุมโปร่งใส ใช้ Circle Crop แทน ซึ่งใช้ pipeline ฝั่งเบราว์เซอร์เหมือนกัน แต่ให้ผลลัพธ์เป็น PNG ทรงกลม สำหรับ preset เฉพาะแพลตฟอร์มที่มี default dimensions ตั้งไว้ล่วงหน้า (Instagram 1080×1080, YouTube thumbnail 1280×720, Facebook cover 1200×630) หน้า preset crop ในตระกูล Crop จะเปิดด้วยขนาดเหล่านั้นโหลดไว้แล้ว ไม่ต้องคำนวณ ถ้ารูปต้องเปลี่ยน format โดยไม่ครอปก่อน ใช้เครื่องมือ Convert เพื่อให้ได้ PNG, JPG, WebP หรือ AVIF

วิธีครอบตัดรูปภาพเป็นวงกลม

  1. วางหรืออัปโหลดรูป

    ลากไฟล์ JPG, PNG, WebP หรือ AVIF มาวางในพื้นที่อัปโหลด หรือคลิกเพื่อเลือกไฟล์จากอุปกรณ์ของคุณ รูปจะเปิดในพื้นที่ครอปทันที

  2. กำหนดพื้นที่ครอป

    เลือก ratio chip (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 หรือ A4) หรือพิมพ์ขนาดพิกเซลในช่อง width และ height เพื่อตั้งกรอบครอป

  3. วางตำแหน่งกรอบ

    ลากกรอบครอปไปยังบริเวณที่ต้องการเก็บ ปรับขนาดจากมุมหรือขอบจนตัวเลข live readout แสดงขนาดเอาต์พุตที่ต้องการ

  4. ครอปและดาวน์โหลด

    คลิกครอป เลือก format เอาต์พุต (PNG, JPG, WebP หรือ AVIF) ในหน้าจบงาน แล้วดาวน์โหลดไฟล์ที่ครอปแล้วลงอุปกรณ์ของคุณ

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

ครอปรูปออนไลน์นี้ต้องอัปโหลดรูปไปที่เซิร์ฟเวอร์ไหม?

ไม่ต้องอัปโหลดเลย รูปภาพถูกประมวลผลทั้งหมดในเบราว์เซอร์โดยใช้ File API และ Canvas API ตรวจสอบได้ด้วยการเปิดแท็บ Network ใน DevTools ขณะครอป ไม่มี request ออกไปยัง server ใด ไฟล์ต้นฉบับและไฟล์ที่ครอปแล้วอยู่บนอุปกรณ์ตลอดทั้งเซสชัน

ครอปรูปแบบวงกลม (circle crop) ได้ไหม?

เครื่องมือนี้ครอปสี่เหลี่ยมเท่านั้น สำหรับการครอปวงกลมหรือรูปโปรไฟล์ทรงกลม ใช้เครื่องมือ Circle Crop แทน ซึ่งใช้ pipeline ฝั่งเบราว์เซอร์เหมือนกันแต่ให้ผลลัพธ์เป็น PNG ทรงกลมพร้อม transparent corner

ตั้งค่าอัตราส่วนภาพ เช่น 1:1 หรือ 16:9 ได้ไหม?

ได้ เลือก ratio chip 1:1 (สี่เหลี่ยมจัตุรัส), 16:9 (widescreen), 9:16 (portrait), 4:5, 3:2, 4:3 หรือ A4 กรอบครอปจะล็อกสัดส่วนนั้นทันที หรือพิมพ์ขนาด width และ height เองก็ได้ เครื่องมือไม่ขยายภาพ ขนาดเอาต์พุตเท่ากับขนาด selection ที่เลือกจริง

รูป PNG ที่มีพื้นหลังโปร่งใสจะยังโปร่งใสอยู่ไหมหลังครอป?

ใช่ หากดาวน์โหลดเป็น PNG หรือ WebP พื้นที่โปร่งใสจะถูกรักษาไว้ครบถ้วน แต่หากเลือก JPG เป็น format ผลลัพธ์ พื้นที่โปร่งใสจะถูกแทนด้วยสีขาว เพราะ JPG ไม่มี alpha channel AVIF ก็รองรับ transparency เช่นกัน

ดาวน์โหลดเป็น JPG, PNG, WebP หรือ AVIF ได้ไหม?

ได้ทั้ง 4 รูปแบบ เลือกได้ในหน้าจบงานหลังครอป Format เริ่มต้นจะตรงกับ input เช่น ถ้า upload PNG จะ default เป็น PNG AVIF ให้ขนาดไฟล์เล็กที่สุดแต่ต้องโหลด WASM ประมาณ 870 KB ครั้งแรก ข้อมูล EXIF จะถูกลบออกจากทุก format

ครอปรูปด้วยคีย์บอร์ดได้ไหม?

ได้ กด Tab ไปที่กรอบครอป แล้วใช้ Arrow keys เลื่อน 1 พิกเซลต่อครั้ง กด Shift+Arrow เพื่อเลื่อน 10 พิกเซล ฟีเจอร์นี้มีใน cropperjs v2 โดยตรง ไม่ต้องเปิด mode พิเศษ เหมาะสำหรับการจัดวาง pixel-perfect หรือการใช้งาน keyboard-only

รายละเอียด

บันทึกจากทีมเกี่ยวกับงานฝีมือ รูปแบบ และการตัดสินใจเล็กๆ ที่อยู่เบื้องหลังการครอบตัดวงกลมที่ดี

cropperjs v2 กับ v1 ความแตกต่างที่ผู้ใช้เห็น
เครื่องมือนี้สร้างบน cropperjs version 2.1.1 ซึ่งเป็นการเขียนใหม่ทั้งหมดจากไลบรารี cropperjs ต้นฉบับ v2 เปลี่ยน API แบบ constructor เดิม (new Cropper(img, { aspectRatio: 1 })) เป็นสถาปัตยกรรม Web Components คือ Crop canvas, selection overlay และ image element ล้วนเป็น custom HTML elements ที่ลงทะเบียนผ่าน CustomElementRegistry ของเบราว์เซอร์ หมายความว่า Shadow DOM จัดการสไตล์ภายในทั้งหมด ไม่ต้องนำเข้าไฟล์ cropper.css แยก ซึ่งลด request ทรัพยากร Vite ลงหนึ่งรายการเมื่อเทียบกับ v1 การล็อกอัตราส่วนตอนนี้ตั้งบน selection element โดยตรง (cropperSelection.aspectRatio = 1) ไม่ใช่ใน constructor จึงเปลี่ยนอัตราส่วนได้ขณะรันไทม์โดยไม่ต้อง initialize ใหม่ ขนาดไลบรารี 41 960 bytes raw และ 12 175 bytes หลังบีบอัด gzip วัดตรงจาก content-length header ของ jsDelivr CDN 12 KB นี้จ่ายครั้งเดียวต่อเซสชัน และใช้ซ้ำได้ในทุก preset crop routes ผ่าน Vite chunk splitting
ข้อมูล EXIF ถูกลบออกอย่างไร
ทุกการ export ลบข้อมูล EXIF, IPTC, XMP และ ICC profile ออก เหตุการณ์นี้เกิดที่ระดับ canvas pipeline เบราว์เซอร์วาด pixel ของรูปที่ decode แล้วลงบน HTMLCanvasElement แล้ว canvas เข้ารหัสเป็นไฟล์ใหม่ Canvas ไม่มีแนวคิดของ metadata containers มันเก็บแค่ค่า pixel และพารามิเตอร์การเข้ารหัสเท่านั้น สิ่งที่ถูกลบรวมถึงพิกัด GPS, แบรนด์และรุ่นของกล้อง, focal length ของเลนส์, ค่า exposure, ฟิลด์ลิขสิทธิ์ และ tag color profile ICC profile sRGB เป็นสมมติฐานเริ่มต้นของ canvas สี renders ผ่าน pipeline ของเบราว์เซอร์และเข้ารหัสใหม่โดยไม่แนบ profile สำหรับการเผยแพร่บนเว็บและโซเชียลมีเดียส่วนใหญ่ การลบ EXIF เป็นที่ต้องการเพราะข้อมูล GPS อาจเปิดเผยตำแหน่งที่ผู้ใช้ไม่ได้ตั้งใจแชร์ ยืนยันพฤติกรรมเดียวกันบน Chromium, Firefox และ WebKitGTK ใน convert tool E2E run
ทำไม output ไม่ขยายภาพ
เมื่อคุณลาก selection ครอปบนหน้าจอ ค่าพิกัดที่คุณเห็นอยู่ในพื้นที่ pixel ของไฟล์ต้นฉบับ ไม่ใช่พื้นที่ pixel ของ CSS ความแตกต่างนี้สำคัญสำหรับหน้าจอความหนาแน่นสูง โทรศัพท์ที่มี device pixel ratio 3× แสดงรูปกว้าง 300 CSS pixels เป็น 900 real pixels จริง แต่พิกัด selection สะท้อน 900 real pixels ไม่ใช่ 300 CSS ไฟล์ที่คุณดาวน์โหลดมี pixel เท่ากับที่สี่เหลี่ยม selection แทนในรูปต้นฉบับพอดี การครอปเรียก selection.toCanvas() ของ cropperjs v2 ซึ่งเป็น method แบบ async คืนค่า HTMLCanvasElement ใหม่ที่มีขนาดเท่ากับขนาด selection canvas นั้นถูกส่งต่อให้ canvas.toBlob() สำหรับ PNG, JPG หรือ WebP หรือไปยัง @jsquash/avif encoder สำหรับ AVIF ไม่มีขั้นตอนการขยายภาพแทรกอยู่ ถ้า selection กว้าง 800 pixels เอาต์พุตก็กว้าง 800 pixels
ข้อจำกัดด้าน format ที่ควรรู้
Input รองรับ JPG, PNG, WebP, AVIF และ GIF (เฟรมแรกเท่านั้น) เพราะ HTMLImageElement ไม่เปิดเฟรมแต่ละเฟรมของ GIF animated ให้ JavaScript ในแบบที่ canvas API จะวนซ้ำได้ ผลคือมีเพียงเฟรมแรกที่ใช้กับ selection ครอป และเอาต์พุตสุดท้ายเป็นรูปนิ่ง ไม่รองรับ GIF เป็น output เพราะ canvas.toBlob ของเบราว์เซอร์ไม่มี GIF encoder ทำให้เครื่องมือปฏิเสธ GIF ในตัวเลือก output อย่างชัดเจน เพื่อหลีกเลี่ยงการ silent downgrade เป็น PNG AVIF บน Firefox ช้ากว่า Chromium ประมาณ 4 เท่าเมื่อ input ใหญ่กว่า 4MP (พบในการทดสอบ E2E ของ convert tool) ไม่รองรับ HEIC, TIFF, PSD โดยตรง ใช้ Convert tool เพื่อแปลงก่อน ครอปแล้วได้ผลลัพธ์ที่คาดเดาได้กว่า
ขนาดไฟล์ที่รองรับและข้อควรระวังบน mobile
Input สูงสุดประมาณ 25 MB บน mobile Safari และประมาณ 100 MB บน desktop เกินขีดจำกัดอาจทำให้หน้าเด้งโดยไม่มีข้อความแจ้งเตือน เพราะ JavaScript เกิน memory quota ระหว่าง decode รูปขนาดใหญ่ ถ้าต้องทำงานกับรูปที่ใหญ่กว่านี้ แนะนำใช้ desktop หรือลดขนาดไฟล์ด้วยเครื่องมืออื่นก่อน รูปแนวนอน 16:9 บน Instagram ที่ต้องครอปเป็น 1:1 ก่อน แนะนำใช้ preset route ที่มีขนาดมาตรฐาน Instagram ตั้งไว้ล่วงหน้าจะสะดวกกว่า การลาก selection บนหน้าจอเล็กของ mobile ทำได้ผ่าน touch จีบเพื่อซูม canvas แล้วลากมุม selection การควบคุมด้วยปุ่มลูกศรไม่ได้ใช้บน mobile โดยปกติ แต่ touch responses ทำงานเทียบเท่ากัน
เปรียบเทียบกับคู่แข่งหลักในตลาด
iLoveIMG ทำงานฝั่ง server เท่านั้น รูปต้องอัปโหลดเข้าระบบของเขาก่อนครอป ไม่มี keyboard navigation บนหน้าครอป และไม่มี ratio chip บนหน้าหลัก ต้องคลิกเข้าไปในเมนู PiliApp ประมวลผลใน browser แต่ไม่มี per-preset SEO routes แยกต่างหากสำหรับ Instagram, YouTube หรือ Facebook ทำให้ user ที่หาขนาดเฉพาะแพลตฟอร์มต้องคำนวณเอง ResizePixel มี cookie banner ขนาดใหญ่ที่ทำให้ word count เกินจริง เนื้อหา educational เกี่ยวกับ aspect ratio น้อยมาก เครื่องมือนี้รองรับ PNG, JPG, WebP และ AVIF output พร้อม keyboard accessibility และมี landing pages แยกต่อ ratio และต่อแพลตฟอร์ม ซึ่งครอบคลุม long-tail search intent ที่คู่แข่งไม่จับ