CSS วิธีครอบตัดรูปภาพที่เปลี่ยนอัตราส่วนภาพ วิธีย่อ ยืด ครอป แปลง และปรับขนาดรูปภาพด้วย CSS ขนาดภาพใหม่

การตัดภาพออกเป็นส่วนๆ แล้วรวมเป็นภาพเดียวเป็นเทคนิคที่มีมายาวนานและได้กลายมาเป็นส่วนหนึ่งของคลังแสงเค้าโครงหน้าเว็บ ภาพวาดที่เตรียมไว้จะถูกตัดออกเป็นส่วนๆ ในโปรแกรมแก้ไขกราฟิก ส่วนต่างๆ จะถูกบันทึกเป็นภาพกราฟิกแยกกัน จากนั้นจึงเชื่อมต่อเข้าด้วยกันโดยใช้ตาราง

ก่อนอื่นให้เราพิจารณาว่าเหตุใดจึงใช้การแบ่งส่วนรูปภาพ และท้ายที่สุดแล้วมันให้ข้อดีอะไรบ้าง และจากนั้นจะใช้ตารางในทางปฏิบัติอย่างไร

ข้อดีของการตัดภาพ

การสร้างลิงค์

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

เอฟเฟกต์กลิ้ง

ชุดของแฟรกเมนต์แต่ละส่วนช่วยให้คุณสร้างเอฟเฟกต์แบบกลิ้งได้ โดยเปลี่ยนรูปภาพหนึ่งเป็นอีกรูปภาพหนึ่งแบบไดนามิกเมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือรูปภาพนั้น และย้อนกลับไปยังรูปภาพก่อนหน้าเมื่อเคอร์เซอร์เลื่อนออกไป

การลดขนาดไฟล์

จะสะดวกกว่าในการจัดการแต่ละส่วนของรูปภาพโดยการเลือกรูปแบบกราฟิกและพารามิเตอร์ของรูปแบบเหล่านั้น เพื่อให้ขนาดไฟล์มีขนาดเล็กที่สุดโดยยังคงรักษาคุณภาพของภาพที่ยอมรับได้ เป็นผลให้ชุดของไฟล์กราฟิกจะใช้พื้นที่น้อยลงและโหลดได้เร็วกว่าไฟล์เดียวที่มีภาพวาดทั้งหมด

GIF แบบเคลื่อนไหว

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

คุณสมบัติเค้าโครง

รูปภาพบนหน้าเว็บมีลักษณะเป็นรูปสี่เหลี่ยมผืนผ้า แต่ด้วยการตัดรูปภาพหนึ่งรูปออกเป็นองค์ประกอบต่างๆ คุณจะได้ตัวสร้างที่คุณสามารถสร้างรูปร่างอื่นได้ สิ่งนี้ชวนให้นึกถึงบล็อกของเด็ก ๆ ซึ่งมีการวางรูปภาพไว้ด้านหนึ่ง คุณต้องเพิ่มรูปร่างดังกล่าวบนหน้าเว็บด้วยเหตุผลหลายประการ เช่น คุณต้องเพิ่มข้อความแทนส่วนของรูปภาพ นอกจากนี้รูปภาพบางรูปสามารถแทนที่ด้วยพื้นหลังที่เหมือนกันได้จากนั้นรูปภาพสุดท้ายจะครอบครองพื้นที่ที่มีอยู่ทั้งหมดของเอกสารในขณะที่ยังคงความสมบูรณ์ไว้

ด้านจิตวิทยา

เมื่อรูปภาพหนึ่งประกอบด้วยหลายแฟรกเมนต์ เบราเซอร์จะดาวน์โหลดรูปภาพเหล่านั้นในหลายเธรด และแสดงรูปภาพที่ดาวน์โหลดก่อน ดังนั้นรูปภาพจึงปรากฏเป็นองค์ประกอบโมเสก และสิ่งนี้ดึงดูดความสนใจทันทีและดูเหมือนว่าจะโหลดเร็วขึ้น ดังนั้นในด้านเทคนิค ภาพหนึ่งภาพจะโหลดเร็วขึ้น แต่จากมุมมองของการรับรู้ของมนุษย์ ดูเหมือนว่าภาพเล็กๆ ชุดหนึ่งจะปรากฏเร็วขึ้น

กำลังเตรียมภาพ

เป็นตัวอย่างภาพที่จำเป็นต้องตัด ให้ใช้รูปที่ 1 2.12. แต่ละไอคอนทั้งสามเป็นลิงค์ไปยังส่วนที่เกี่ยวข้องนอกจากนี้ลิงค์ไปยังหน้าหลักคือรูปภาพพร้อมชื่อของเว็บไซต์

ข้าว. 2.12. ภาพต้นฉบับ

ตามทฤษฎี ในกรณีนี้ คุณสามารถทำได้โดยไม่ต้องตัด หากคุณใช้แผนผังรูปภาพ (แท็ก และ ). อย่างไรก็ตาม ตัวเลือกนี้ไม่สามารถยอมรับได้เนื่องจากการพิจารณาดังต่อไปนี้ เมื่อคุณเปิดส่วนใด ๆ ไอคอนที่สอดคล้องกับส่วนนั้นจะถูกแปลงซึ่งโดยทั่วไปจะเปลี่ยนรูปภาพทั้งหมด (รูปที่ 2.13) หากคุณใช้แผนที่รูปภาพ คุณจะต้องเตรียมรูปภาพที่แตกต่างกันสี่ภาพ (หนึ่งภาพสำหรับหน้าหลักและอีกสามภาพสำหรับแต่ละส่วน) และท้ายที่สุดจะส่งผลต่อปริมาณข้อมูลที่ส่ง ความเร็วของการแสดงไซต์ และคุณภาพของ รูปภาพ.

ข้าว. 2.13. มุมมองภาพเมื่อเปิดส่วน

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

การตัดภาพ

เป็นการดีกว่าที่จะมอบความไว้วางใจในการตัดและ "ประกอบ" ภาพวาดให้กับโปรแกรมพิเศษโดยเฉพาะ Adobe Photoshop ดังนั้นการอ้างอิงถึงเครื่องมือและเมนูทั้งหมดจึงอ้างอิงถึงโปรแกรมนี้โดยเฉพาะ

เพื่อให้ง่ายต่อการตัดภาพ คุณควรเพิ่มเส้นบอกแนวก่อน ซึ่งจะมีการแบ่งเป็นส่วนย่อย (รูปที่ 2.14) เราจะเพิ่มบรรทัดด้านล่างโดยใช้สไตล์ในภายหลัง ดังนั้นจึงไม่มีส่วนร่วมในรูปภาพ

ข้าว. 2.14. การเพิ่มคำแนะนำให้กับภาพ

ตอนนี้เราใช้เครื่องมือ Slice (เปิดใช้งานโดยปุ่ม K) และติดตามพื้นที่สี่เหลี่ยมที่ต้องการตามคำแนะนำ พื้นที่ที่กำหนดจะถูกทำเครื่องหมายด้วยกรอบสีน้ำเงินพร้อมหมายเลขชิ้นส่วนที่มุมซ้ายบน ขนาดของพื้นที่สามารถเปลี่ยนแปลงได้โดยใช้เครื่องมือ Slice Select พิเศษ เราคลิกเมาส์ด้วยเครื่องมือนี้บนส่วนที่ต้องการ - สีของกรอบรอบ ๆ พื้นที่จะกลายเป็นสีเหลืองและโทนสีของภาพก็เปลี่ยนไปเช่นกัน หลังจากนั้นคุณสามารถใช้เคอร์เซอร์ของเมาส์เพื่อย้ายขอบเขตของส่วนโดยใช้เครื่องหมายพิเศษที่ด้านข้างและมุมของพื้นที่ (รูปที่ 2.15)

ข้าว. 2.15. การเปลี่ยนพื้นที่แฟรกเมนต์

หากต้องการสลับระหว่างเครื่องมือ Slice และ Slice Select อย่างรวดเร็ว ให้กดปุ่ม Ctrl ค้างไว้

เมื่อปรับขนาดแฟรกเมนต์ ตรวจสอบให้แน่ใจว่าพื้นที่ไม่ตัดกัน และไม่มีช่องว่างระหว่างกัน แม้ว่า Photoshop จะบันทึกข้อบกพร่องดังกล่าวและใช้มาตรการเพื่อกำจัดข้อบกพร่องเหล่านั้น แต่ก็เป็นการดีกว่าที่จะเก็บทุกอย่างไว้ภายใต้การควบคุมของคุณ

หลังจากการวิเคราะห์เบื้องต้นและการใช้เครื่องมือ Slice เราจะได้ชิ้นส่วน 13 ชิ้น (รูปที่ 2.16) แฟรกเมนต์ที่สร้างโดยเครื่องมือ Slice จะแสดงเป็นสีน้ำเงิน แฟรกเมนต์ที่สร้างขึ้นโดยอัตโนมัติจะแสดงเป็นสีเทา

ข้าว. 2.16. รูปภาพถูกตัดเป็นชิ้น ๆ

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

การใช้โต๊ะเพื่อกาวเศษชิ้นส่วนเข้าด้วยกัน

หลังจากกำหนดแฟรกเมนต์แล้ว คุณจะต้องบันทึกอิมเมจทั้งหมดลงดิสก์ เมื่อต้องการทำเช่นนี้ ให้เลือกรายการเมนู ไฟล์ > บันทึกสำหรับเว็บและอุปกรณ์...(ไฟล์ > บันทึกสำหรับเว็บ, Alt + Shift + Ctrl +S) เพื่อเปิดแผงการเพิ่มประสิทธิภาพกราฟิก (รูปที่ 2.17)

ข้าว. 2.17. แผงเพิ่มประสิทธิภาพรูปภาพ

การใช้เครื่องมือ Slice Select คุณสามารถเลือกส่วนที่ต้องการและตั้งค่าพารามิเตอร์ส่วนบุคคล เช่น จำนวนสี ค่าการสูญเสียคุณภาพ ความโปร่งใส ฯลฯ คุณสามารถเลือกหลายส่วนพร้อมกันได้โดยกดปุ่ม Shift ค้างไว้ซึ่งช่วยให้คุณสามารถตั้งค่าพารามิเตอร์เดียวกันสำหรับชิ้นส่วนเหล่านั้นได้

หลังจากทำงานกับแฟรกเมนต์เสร็จแล้วให้คลิกปุ่ม "บันทึก" ระบุตำแหน่งบนดิสก์ที่จะบันทึกเอกสาร HTML ชื่อประเภทและการตั้งค่า (รูปที่ 2.18)

ข้าว. 2.18. การตั้งค่าเมื่อบันทึกไฟล์

รูปภาพจะถูกบันทึกโดยอัตโนมัติในโฟลเดอร์รูปภาพ และชื่อของรูปภาพนั้นถูกสร้างขึ้นจากชื่อของไฟล์ HTML พร้อมด้วยการเพิ่มหมายเลขแฟรกเมนต์ ตัวอย่างเช่น ชื่อที่บันทึกไว้จะเป็น Splash.html จากนั้นส่วนแรกจะเรียกว่า Splash_01.png และส่วนสุดท้ายจะเป็น Splash_13.png นอกจากนี้ ยังมีการสร้างไฟล์ spacer.gif ซึ่งเป็นรูปภาพโปร่งใสขนาด 1x1 พิกเซล ใช้เพื่อสร้างรูปภาพในตารางอย่างถูกต้อง

การตั้งค่าที่ใช้สร้างโค้ด HTML และสร้างชื่อรูปภาพสามารถเปลี่ยนแปลงได้หากเมื่อบันทึกไฟล์ในส่วนการตั้งค่าให้เลือกอื่น ๆ... ในหน้าต่างการตั้งค่าคุณสามารถเลือกโฟลเดอร์ที่จะบันทึกรูปภาพ วิธีการสร้างชื่อไฟล์รวมถึงโค้ด HTML ( รูปที่ 2.19)

ข้าว. 2.19. แผงสำหรับเลือกการตั้งค่าเอาต์พุต

รหัส HTML ที่ได้รับจากการบันทึกไฟล์หลังจากการแก้ไขเล็กน้อยจะแสดงไว้ในตัวอย่าง 2.12

ตัวอย่าง 2.12. ตารางสำหรับการรวมภาพ

คัดลอกภาพตัด

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

เพื่อให้ได้ผลลัพธ์ที่ต้องการ เรามาแนะนำเลเยอร์ที่มีภาพพื้นหลังและวางซ้อนตารางไว้ด้านบน ภาพนี้แสดงในรูปที่. 2.20.

ข้าว. 2.20. ภาพพื้นหลัง ใส่กรอบรอบๆ เพื่อความชัดเจน

ตอนนี้เราสร้างเลเยอร์ที่ต้องการ เรียกว่า toplayer และระบุพารามิเตอร์ในรูปแบบ (ตัวอย่าง 2.13)

ตัวอย่าง 2.13. ชั้นสำหรับสร้างลายเส้น

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

นิทานแดนเหนือ

...

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

สิ่งที่เหลืออยู่คือการลบรูปภาพที่มีชิ้นส่วนที่ไม่มีนัยสำคัญออกโดยคงขนาดไว้ที่เซลล์ตาราง (ตัวอย่าง 2.14)

ตัวอย่างที่ 2.14 รหัสสุดท้าย

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

นิทานแดนเหนือ

ในตัวอย่างนี้ ประเภทเอกสารถูกเปลี่ยนเป็นแบบเข้มงวด ซึ่งส่งผลให้มีการเยื้องเล็กน้อยที่ด้านล่างของรูปภาพ หากต้องการลบออก ให้เพิ่ม display : block ลงในตัวเลือก IMG ในรูปแบบ

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

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

ตัวอย่าง 2.15. เค้าโครงโดยใช้เลเยอร์

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

นิทานแดนเหนือ

ที่นี่เลเยอร์ toplayer ใช้ภาพพื้นหลังเพื่อสร้างแถบที่มีความสูงที่กำหนดตลอดความกว้างทั้งหมดของหน้าต่าง เลเยอร์เมนูกำหนดองค์ประกอบหลักที่อยู่ตรงกลางด้านบนของแถบพื้นหลัง ตำแหน่งของรูปภาพภายในเลเยอร์เมนูจะถูกควบคุมโดยคุณสมบัติด้านบนและด้านซ้าย เนื่องจากการใช้งานสไตล์ที่ใช้งานอยู่ รหัส HTML จึงลดลงอย่างมาก รูปภาพมีความเป็นอิสระจากกัน สามารถย้าย เปลี่ยนเป็นรูปภาพอื่นได้อย่างง่ายดาย และเพิ่มรูปภาพใหม่ นี่เป็นกรณีที่โต๊ะไม่มีโอกาสในระหว่างเลย์เอาต์

คำอธิบาย

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

ไวยากรณ์

คลิป: ตรง(Y1, X1, Y2, X2) | อัตโนมัติ | สืบทอด

ค่านิยม

ค่าที่ใช้คือระยะห่างจากขอบขององค์ประกอบไปยังพื้นที่คลิปซึ่งตั้งค่าไว้ในหน่วย CSS - พิกเซล (px), em ฯลฯ หากจำเป็นต้องปล่อยขอบของพื้นที่ไว้ไม่เปลี่ยนแปลง คุณควรตั้งค่า เป็น auto ตำแหน่งของค่าที่เหลือจะแสดงในรูป 1.

ข้าว. 1. ค่าคุณสมบัติคลิป

HTML5 CSS2.1 IE Cr Op Sa Fx

คลิป

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. คุณเพียงแค่ต้องทำเช่นนี้และทำขั้นตอนสุดท้ายให้เสร็จสิ้น

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.

ข้าว. 2. การใช้คลิปในเบราว์เซอร์ Safari

โมเดลวัตถุ

document.getElementById("elementID ").style.clip

เบราว์เซอร์

Internet Explorer จนถึงเวอร์ชัน 7.0 ทำงานร่วมกับรูปแบบที่แตกต่างกันซึ่งค่าพิกัดจะถูกคั่นด้วยช่องว่างแทนที่จะเป็นลูกน้ำ - คลิป : rect(40px auto auto 40px) . นอกจากนี้ Internet Explorer จนถึงเวอร์ชัน 7.0 ยังไม่รองรับค่าที่สืบทอด

เมื่อเตรียมภาพสำหรับเว็บ มักจะจำเป็นต้องครอบตัดภาพเหล่านั้นเพื่อเน้นส่วนที่จำเป็นของภาพและตัดส่วนที่ไม่จำเป็นออก นอกเหนือจากการตัดสินทางศิลปะล้วนๆ แล้ว การตัดแต่งหรือที่เรียกกันว่าการครอบตัดก็เป็นสิ่งจำเป็นเพื่อลดขนาดของไฟล์ ยิ่งรูปภาพเล็กลง ขนาดไฟล์ก็จะเล็กลง และโหลดเข้าสู่เว็บเพจได้เร็วยิ่งขึ้น

วิธีลบส่วนที่ไม่จำเป็นของรูปภาพ

เรามาดูกันว่าจริงๆ แล้วการครอบตัดทำได้โดยการเอาแถบสีดำแคบๆ ที่ขอบด้านล่างของภาพออก ซึ่งไม่สามารถทำให้สีจางลงได้เพียงพอ การครอบตัดทำได้โดยใช้เครื่องมือพิเศษ Crop Tool (C)

คลิกปุ่มครอบตัดเครื่องมือ (C) บนแผงเครื่องมือเพื่อเลือกเครื่องมือนี้

ตั้งตัวชี้เมาส์ไปที่รูปร่างที่มุมซ้ายบนของรูปภาพ

คลิกปุ่มซ้ายของเมาส์ค้างไว้

โดยไม่ต้องปล่อยปุ่มซ้ายของเมาส์ ให้เลื่อนตัวชี้เมาส์ไปที่ด้านล่างของขอบขวาของภาพถ่าย เพื่อให้กรอบการเลือกเส้นประที่ปรากฏขึ้นไม่มีแถบสีดำแคบๆ ที่ขอบด้านล่างของภาพ

ปล่อยปุ่มซ้ายของเมาส์ กรอบจะล็อคและมีเครื่องหมายสี่เหลี่ยมปรากฏขึ้นที่มุมและตรงกลางด้านข้าง พื้นที่ของภาพนอกกรอบครอบตัดจะมืดลงซึ่งบ่งบอกถึงส่วนของรูปภาพที่ถูกครอบตัด

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

โดยการเลื่อนขอบจับกรอบการเลือก ตรวจสอบให้แน่ใจว่ากรอบการครอบตัดรวมรูปภาพทั้งหมด โดยไม่นับแถบสีดำแคบๆ ที่ขอบด้านล่างของรูปภาพ

ดับเบิลคลิกภายในกล่องครอบตัดหรือกด Enter รูปภาพจะถูกครอบตัดตามขอบที่กำหนด

วิธีลดขนาดภาพ

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

เลือกคำสั่งเมนู Image - Image Size กล่องโต้ตอบขนาดภาพจะปรากฏบนจอแสดงผล

ในส่วนที่สูงที่สุดของกล่องโต้ตอบ ในกลุ่มส่วนควบคุม ขนาดพิกเซล (ขนาดเป็นพิกเซล) ขนาดไฟล์ปัจจุบันในรูปแบบ PSD จะถูกระบุ - 400.3K รวมถึงความกว้างปัจจุบัน (ความกว้าง) และความสูง (ความสูง) ของ รูปภาพเป็นพิกเซล ค่าของคุณหลังจากการครอบตัดอาจแตกต่างกันเล็กน้อย

ในกลุ่มควบคุมขนาดเอกสาร จะมีการระบุขนาดเอกสารเป็นเซนติเมตรและความละเอียดกราฟิก (ความละเอียด) เมื่อตั้งค่าสถานะ Constrain Proportions โปรแกรมจะรักษาสัดส่วนของภาพโดยอัตโนมัติเมื่อเปลี่ยนขนาดใดขนาดหนึ่ง - ความกว้างหรือความสูง

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

เมื่อลดขนาดหรือความละเอียดกราฟิก Adobe Photoshop จะลบข้อมูลที่ซ้ำซ้อนออกจากรูปภาพ และเมื่อเพิ่มคุณสมบัติเหล่านี้ มันจะสร้างข้อมูลที่ขาดหายไปตามค่าสีของพิกเซลที่มีอยู่ ในทั้งสองกรณี โปรแกรมจะใช้หนึ่งใน 5 วิธีการแก้ไข ซึ่งสามารถเลือกได้ในรายการแบบเลื่อนลง Resample Image

เนื่องจากภาพถ่ายที่มีขนาดที่เราต้องการเปลี่ยนถูกสร้างขึ้นเพื่อแสดงบนจอแสดงผล จึงไม่ควรเปลี่ยนความละเอียดกราฟิก

ตรวจสอบให้แน่ใจว่าได้ทำเครื่องหมายในช่อง Resample Image เพื่อรักษาความละเอียดกราฟิกของรูปภาพและปรับขนาด

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

ปิดกล่องโต้ตอบขนาดรูปภาพโดยคลิกตกลง จะใช้คุณสมบัติที่ระบุและขนาดภาพในหน้าต่างเอกสารจะลดลง

วิธีหลีกเลี่ยงการสูญเสียคุณสมบัติของภาพเมื่อปรับขนาด

ตามที่ระบุไว้แล้ว การลดขนาดของรูปภาพจะลบข้อมูลที่ซ้ำซ้อนออกไป ซึ่งจะทำให้ความคมชัดลดลง การใช้ฟิลเตอร์ Unsharp Mask สามารถคืนความคมชัดของภาพได้ในระดับหนึ่ง

เลือกคำสั่งเมนู Filter - Sharpen - Unsharp Mask (ตัวกรอง - ความคมชัด - ความคมชัดของรูปร่าง) กล่องโต้ตอบ Unsharp Mask จะปรากฏขึ้นบนหน้าจอ

เลื่อนแถบเลื่อนจำนวนเพื่อคืนความคมชัดของภาพถ่าย ค่าของพารามิเตอร์นี้ควรอยู่ภายใน 50-60%

คลิกตกลงเพื่อปิดกล่องโต้ตอบ Urisharp Mask ภาพจะคมชัดขึ้น

บันทึกเอกสารโดยเลือกคำสั่งเมนู ไฟล์ - บันทึก

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

ในบทความนี้ เราจะได้เรียนรู้วิธีปรับขนาดและครอบตัดรูปภาพโดยใช้องค์ประกอบใน HTML5 และในขณะที่เรากำลังดำเนินการอยู่ เรามาออกแบบส่วนควบคุมที่มีสไตล์เหมือนกับในโปรแกรมแก้ไขรูปภาพกันดีกว่า

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

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

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

ด้วยเหตุนี้เราจึงเริ่มทำงาน!

การทำเครื่องหมาย

ในการสาธิตของเรา เราจะทำงานกับรูปภาพเดียวที่กำหนด:

ทั้งหมด! เราไม่ต้องการ HTML อื่นใด

ซีเอสเอส

รหัส CSS จะไม่ใหญ่มากเช่นกัน เรามากำหนดสไตล์สำหรับคอนเทนเนอร์ปรับขนาดและรูปภาพกันดีกว่า

ปรับขนาดคอนเทนเนอร์ ( ตำแหน่ง: สัมพันธ์; จอแสดงผล: อินไลน์บล็อก; เคอร์เซอร์: ย้าย; ระยะขอบ: 0 อัตโนมัติ; ) .resize-container img ( จอแสดงผล: บล็อก ) .resize-container:hover img, .resize-container:active img ( โครงร่าง: 2px ประ rgba(222,60,80,.9); )

ตอนนี้เรามากำหนดตำแหน่งและสไตล์สำหรับ 'ตัวจับปรับขนาด' แต่ละตัวกัน สิ่งเหล่านี้คือสี่เหลี่ยมเล็กๆ ที่อยู่ตรงมุมของรูปภาพที่เราลากเพื่อปรับขนาดรูปภาพ

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( ตำแหน่ง: สัมบูรณ์; จอแสดงผล: บล็อก; ความกว้าง: 10px; ความสูง: 10px; พื้นหลัง: rgba(222,60,80,.9); z-index: 999; ) .resize-handle-nw ( บน: -5px; ซ้าย: -5px; เคอร์เซอร์: nw-resize; ) .resize-handle- sw ( ด้านล่าง: -5px; ซ้าย: -5px; เคอร์เซอร์: sw-resize; ) .resize-handle-ne ( บน: -5px; ขวา: -5px; เคอร์เซอร์: ne-resize; ) .resize-handle-se ( ด้านล่าง: -5px; ขวา: -5px; เคอร์เซอร์: se-resize; )

จาวาสคริปต์

เริ่มต้นด้วยการสร้างตัวแปรและผืนผ้าใบใน Canvas

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("ผ้าใบ"); )); resizeableImage($(".resize-image");

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

Var resizeableImage = function(image_target) ( // ... init = function())( // สร้างรูปภาพใหม่ด้วยสำเนาของ src ต้นฉบับ // เมื่อทำการปรับขนาด เราจะใช้สำเนาต้นฉบับนี้เป็นฐาน orig_src เสมอ src =image_target.src; //เพิ่มตัวจัดการปรับขนาด $(image_target).wrap("

").ก่อน(" ").ก่อน(" ").หลังจาก(" ").หลังจาก(" "); // รับตัวแปรสำหรับคอนเทนเนอร์ $container = $(image_target).parent(".resize-container"); // เพิ่มเหตุการณ์ $container.on("mousedown", ".resize-handle", startResize ); ); //... ในนั้น(); )

ฟังก์ชัน startResize และ endResize จะบอกเบราว์เซอร์ว่าเมื่อใดควรเริ่มให้ความสนใจกับการเคลื่อนไหวของเมาส์ และเมื่อใดควรหยุด

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", ปรับขนาด); $(document).on("mouseup", endResize ); ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", ปรับขนาด); );

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

SaveEventState = function(e)( // บันทึกรายละเอียดเหตุการณ์เริ่มต้นและสถานะคอนเทนเนอร์ event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset() left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.OriginalEvent.touches.clientX) + $(window).scrollLeft(); event_state. mouse_y = (e.clientY || e.pageY || e.OriginalEvent.touches.clientY) + $(window).scrollTop(); // นี่คือการแก้ไขสำหรับ mobile safari // ด้วยเหตุผลบางประการ จึงไม่อนุญาต คัดลอกโดยตรงของคุณสมบัติ touches if(typeof e.OriginalEvent.touches !== "unknown")( event_state.touches = ; $.each(e.OriginalEvent.touches, function(i, ob)( event_state.touches[i] = (); event_state.touches[i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; )); ) event_state.evnt = e; )

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

ต่อไป เราจะเพิ่มตัวเลือกเพื่อจำกัดขนาดของรูปภาพโดยใช้ปุ่ม Shift หรือตัวแปร

บันทึก: เนื่องจากจริงๆ แล้วเรากำลังปรับขนาดรูปภาพแทนที่จะเพิ่มความยาวและความสูงใหม่ จึงควรพิจารณาว่าเราจะใช้ฟังก์ชัน resizeImage เพื่อควบคุมประสิทธิภาพของเซิร์ฟเวอร์ได้มากเพียงใด

ขนาดภาพใหม่

การวาดภาพใน Canvas นั้นง่ายดายเหมือนกับการวาดภาพ เรากำหนดความสูงและความยาวของรูปภาพ จากนั้นจึงจัดเตรียมต้นฉบับ นอกจากนี้เรายังใช้ toDataURL เพื่อรับผลลัพธ์การดำเนินการเวอร์ชันที่เข้ารหัส Base64

มีคำอธิบายตัวเลือกทั้งหมดสำหรับการดำเนินการนี้ให้ครบถ้วน

ResizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, ความกว้าง, ความสูง); $(image_target).attr( "src", resize_canvas.toDataURL("image/png"); );

ง่ายเกินไป? มีข้อแม้ประการหนึ่ง: รูปภาพจะต้องโฮสต์บนโดเมนเดียวกันกับเพจของเรา หรือใช้ . หากไม่เป็นเช่นนั้น คุณจะประสบปัญหากับ 'ผ้าใบเปื้อน'

เพิ่มขึ้นผ่านจุดยอดอื่นๆ

ตอนนี้คุณควรมีการสาธิตการทำงานแล้ว แต่มันยังไม่จบ ในขณะนี้เราสามารถขยายภาพได้เพียงมุมเดียว แต่เราต้องการใช้ทั้งสี่ภาพ เมื่อต้องการทำเช่นนี้ คุณต้องเข้าใจวิธีการทำงาน

เมื่อเราขยายภาพ มุมที่อยู่ติดกับมุมที่ถือไว้จะต้องขยับด้วย แต่ต้องแก้ไขปลายด้านตรงข้ามของภาพ

เราสามารถเปลี่ยนโค้ดได้เพื่อให้เมื่อรูปภาพถูกยืดออกทุกมุมก็จะเปลี่ยน มาอัปเดตฟังก์ชั่นการปรับขนาดกันเถอะ:

การปรับขนาด = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.OriginalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.OriginalEvent.touches.clientY) + $(window).scrollTop(); // ตำแหน่งรูปภาพ แตกต่างกันขึ้นอยู่กับมุมที่ลากและข้อ จำกัด if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; left = event_state.container_left; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state .container_left); height = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( width = event_state.container_width - (mouse.x - event_state.container_left); height = event_state.container_height - (mouse.y - event_state.container_top); ซ้าย = mouse.x; ด้านบน = mouse.y; if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("ปรับขนาด -handle-ne"))( width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(จำกัด | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // เลือกรักษาอัตราส่วนไว้ถ้า(จำกัด || e.shiftKey)( height = width / orig_src.width * orig_src.height; ) ถ้า(ความกว้าง > min_width && ความสูง > min_height && ความกว้าง< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

ตอนนี้เราตรวจสอบว่ามีการใช้ตัวจัดการปรับขนาดใดและใช้การเปลี่ยนแปลงที่จำเป็น

การย้ายรูปภาพ

ตอนนี้เราเปลี่ยนขนาดของรูปภาพได้แล้ว คุณอาจสังเกตเห็นว่าบางครั้งรูปภาพก็ "เลื่อนออก" จำเป็นต้องเพิ่มความสามารถในการย้ายวัตถุไปที่กึ่งกลางของเฟรม มาขยายฟังก์ชั่นการเริ่มต้นของเรากันหน่อย

Init = function())( //... $container.on("mousedown", "img", startMoving); )

ตอนนี้เราเพิ่มฟังก์ชัน startMoving และ endMoving ซึ่งคล้ายกับ startResize และ endResize

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", moving); $(document).on("mouseup", endMoving ); ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", การย้าย); );

ในฟังก์ชันการเคลื่อนที่ เราต้องหาตำแหน่งของสี่เหลี่ยมด้านซ้ายบน มันควรจะเท่ากับอันแรกที่มีออฟเซ็ตเล็กน้อยซึ่งคำนวณจากการเคลื่อนที่ของกำลังสองอื่น

การเคลื่อนย้าย = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "left": mouse.x - (event_state.mouse_x - event_state.container_left), "top" : mouse.y - (event_state.mouse_y - event_state.container_top) )); );

การครอบตัดรูปภาพ

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

ในการดำเนินการนี้ คุณจะต้องเพิ่มโค้ด HTML ต่อไปนี้:

สิ่งสำคัญคือต้องจำไว้ว่าเฟรมจะต้องมีสีที่แตกต่างจากพื้นหลังของหน้าเสมอ มิฉะนั้นอาจเกิดปัญหาได้

ภาพซ้อนทับ ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 50%; ระยะขอบซ้าย: -100px; ระยะขอบด้านบน: -100px; ดัชนี z: 999; ความกว้าง: 200px; ความสูง: 200px; เส้นขอบ: ทึบ 2px rgba( 222,60,80,.9); box-sizing: content-box; pointer-events: none; ) .overlay:after, .overlay:before ( content: ""; ตำแหน่ง: แน่นอน; display: block; width: 204px ความสูง: 40px ขอบซ้าย: ประ 2px rgba(222,60,80,.9) เส้นขอบขวา: ประ 2px rgba(222,60,80,.9); ) .overlay:before ( บนสุด: 0; ขอบซ้าย: -2px; ขอบบน: -40px; ) .overlay:after ( ล่าง: 0; ขอบซ้าย: -2px; ขอบล่าง: -40px; ) .overlay-inner:after, .overlay -inner:before ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; จอแสดงผล: บล็อก; ความกว้าง: 40px; ความสูง: 204px; ขอบด้านบน: ประ 2px rgba(222,60,80,.9); ขอบล่าง: ประ 2px rgba(222,60,80,.9); ) .overlay-inner:before ( ซ้าย: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( ขวา: 0; ขอบขวา: -40px; ขอบด้านบน: -2px; ) .btn-crop ( ตำแหน่ง: สัมบูรณ์; จัดแนวตั้ง: ด้านล่าง; ขวา: 5px; ด้านล่าง: 5px; การขยาย: 6px 10px; ดัชนี z: 999; สีพื้นหลัง: RGB (222,60,80); เส้นขอบ: ไม่มี; รัศมีเส้นขอบ: 5px; สี: #FFF; )

มาอัปเดตโค้ด JavaScript ด้วย:

Init = function())( //... $(".js-crop").on("click", crop); ); crop = function())( var crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height(); crop_canvas = document.createElement("canvas"); crop_canvas . width = width; crop_canvas.height = height; crop_canvas.getContext("2d").drawImage(image_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL(" รูปภาพ /png")); )

ฟังก์ชันครอบตัดจะคล้ายกับการปรับขนาดรูปภาพ ข้อแตกต่างเพียงอย่างเดียวคือเราได้ขนาดและตำแหน่งครอบตัดจากตำแหน่งของเฟรม

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

เพิ่มการจดจำการสัมผัสและท่าทาง

เราได้สร้างการรองรับเมาส์ อย่าละเลยอุปกรณ์มือถือเช่นกัน

สำหรับ mousedown และ mouseup จะมีโอเปอเรเตอร์ที่เทียบเท่ากัน - touchstart และ touchend และสำหรับ mousemove ก็จะมี touchmove คุณต้องระวังอย่าให้สับสนกับทัชอัพและทัชดาวน์ (ไม่เช่นนั้นมันจะเป็นเรื่องตลก)

มาเพิ่ม touchstart และ touchend ทุกที่ที่เรามี mousedown และ mouseup พร้อมกับ touchmove ทุกที่ที่เรามี mousemove

// ใน init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //ใน startResize() ... $(document).on("mousemove touchmove", การย้าย); $(document).on("แตะปลายเมาส์", endMoving); //In endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", การย้าย); //ใน startMoving()... $(document).on("mousemove touchmove", การย้าย); $(document).on("แตะปลายเมาส์", endMoving); //In endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", การย้าย);

เนื่องจากเราได้เชื่อมต่ออุปกรณ์เคลื่อนที่แล้ว จึงเป็นไปได้ที่ผู้ใช้จะใช้นิ้ว "บีบ" รูปภาพเพื่อทำให้รูปภาพเล็กลง มีห้องสมุดที่สะดวกสบายแห่งหนึ่งชื่อ Hammer ซึ่งช่วยให้คุณจดจำท่าทางต่างๆ ได้มากมาย แต่เนื่องจากเราต้องการเพียงอันเดียว เราจึงเขียนมันสั้นๆ โดยไม่มีสคริปต์เพิ่มเติม

คุณอาจสังเกตเห็นว่าฟังก์ชัน saveEventState ถูกจัดเก็บไว้ในข้อมูลการสัมผัสแล้ว ตอนนี้เราจะต้องการมัน

ขั้นแรกเราตรวจสอบการมีอยู่ของ "การสัมผัสสองครั้ง" และระยะห่างระหว่างกัน นอกจากนี้เรายังดูด้วยว่าระยะห่างระหว่างพวกเขาลดลงเมื่อเราเคลื่อนที่หรือไม่ ตอนนี้เรามาอัปเดตการย้ายกัน:

การเคลื่อนย้าย = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.OriginalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(( " left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // ดูท่าทางการซูมแบบบีบนิ้วขณะเคลื่อนที่ if(event_state. สัมผัส && event_state.touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.OriginalEvent.touches.clientX - touches.clientX; a = a * a; b = e.OriginalEvent.touches.clientY - touches.clientY; b = b * b; var dist2 = Math.sqrt(a + b); อัตราส่วน var = dist2 /dist1; อัตราส่วนความกว้าง = ความกว้าง *; อัตราส่วนความสูง = ความสูง *; // เพื่อปรับปรุงประสิทธิภาพ คุณอาจจำกัดความถี่ในการเรียก resizeImage() resizeImage(width, height); ) );

จากข้อมูลนี้ เราจะลดหรือขยายภาพของเราและปรับความสูงและความยาวของภาพ

นั่นคือทั้งหมดที่ คุณสามารถเปิดได้

สวัสดีทุกคน ฉันชื่อ Anna Blok และวันนี้เราจะมาพูดถึงวิธีการครอบตัดรูปภาพโดยไม่ต้องใช้โปรแกรมกราฟิก

สิ่งนี้จะมีประโยชน์ที่ไหน?

ก่อนอื่น บนไซต์ที่เนื้อหาที่มีรูปภาพมีแนวโน้มที่จะไม่ถูกครอบตัดสำหรับบล็อกใดบล็อกหนึ่งโดยเฉพาะ

ตัวอย่างที่โดดเด่น: บล็อกบน WordPress

สมมติว่าคุณต้องการให้ปกบทความของคุณมีอัตราส่วน 1:1 (สี่เหลี่ยมจัตุรัส) การกระทำของคุณ:

ดาวน์โหลดภาพที่เหมาะสมจากอินเทอร์เน็ต
ครอบตัดใน Photoshop ตามสัดส่วนที่ต้องการ
เผยแพร่บทความ

เมื่อคุณเยี่ยมชมเว็บไซต์ คุณจะเห็นผลลัพธ์ที่คุณคาดหวัง

แต่สมมติว่าคุณลืมครอบตัดรูปภาพใน Photoshop และดาวน์โหลดรูปภาพแบบสุ่มเป็นหน้าปกจากอินเทอร์เน็ต แล้วจะเกิดอะไรขึ้น! ถูกต้องเค้าโครงจะพัง และหากคุณไม่ได้ใช้ CSS เลย รูปภาพ HD ก็สามารถบล็อกการดูข้อความทั้งหมดได้อย่างสมบูรณ์ ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องทราบวิธีการครอบตัดรูปภาพโดยใช้สไตล์ CSS

มาดูสถานการณ์ต่างๆ ว่าสามารถนำสิ่งนี้ไปใช้อย่างไร ไม่เพียงแต่โดยใช้ CSS แต่ยังรวมถึง SVG ด้วย

ตัวอย่างที่ 1

ลองครอบตัดรูปภาพที่วางโดยใช้ภาพพื้นหลัง มาสร้างมาร์กอัป HTML กันหน่อย

มาดูสไตล์ CSS กันดีกว่า เมื่อใช้ background-image เราจะเพิ่มรูปภาพ ระบุเฟรมสำหรับรูปภาพของเรา จัดกึ่งกลางรูปภาพโดยใช้ตำแหน่งพื้นหลัง และตั้งค่าขนาดพื้นหลัง:

JPG); ตำแหน่งพื้นหลัง: กึ่งกลาง; ขนาดพื้นหลัง:ปก; ความกว้าง:300px; ความสูง:300px; )

นี่เป็นวิธีแรกและง่ายที่สุดในการครอบตัดรูปภาพ ตอนนี้เรามาดูตัวอย่างที่สองกัน

ตัวอย่างที่ 2

สมมติว่าเรายังมีกล่องคอนเทนเนอร์แบบเดิมซึ่งมีแท็ก img พร้อมรูปภาพที่เราจะจัดสไตล์

นอกจากนี้เรายังจะจัดกึ่งกลางภาพของเราให้สัมพันธ์กับวัตถุที่เราจะสร้าง และเราใช้คุณสมบัติที่ค่อนข้างไม่ค่อยได้ใช้: object-fit

กล่อง ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ความกว้าง: 300px; ความสูง: 300px; ) .box img ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; แปลง: แปล (-50%, -50%); width:300px; height:300px; object-fit:cover; )

ในความคิดของฉันนี่เป็นวิธีที่ดีที่สุด เหมาะสำหรับบล็อกหากคุณใช้รูปภาพที่มีสัดส่วนต่างกันโดยสิ้นเชิงในการโพสต์

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

ตัวอย่างที่ 3

นอกจากนี้เรายังสามารถสร้างการครอบตัดรูปภาพได้ในขณะนี้หากเราแทรกลงในองค์ประกอบ SVG ลองใช้วงกลมเป็นตัวอย่าง เราสามารถสร้าง SVG โดยใช้แท็ก สร้างแท็กเส้นขอบ svg ที่จะมีแท็กวงกลมและแท็กรูปแบบอยู่ข้างใน ในแท็กรูปแบบเราเขียนแท็กรูปภาพ ในนั้นเราระบุแอตทริบิวต์ xlink:href และเพิ่มรูปภาพ เราจะเพิ่มแอตทริบิวต์ความกว้างและความสูงด้วย แต่นั่นไม่ใช่ทั้งหมด เราจะต้องเพิ่มมูลค่าการเติม เพื่อให้งานของเราได้รับการพิจารณาว่าเสร็จสมบูรณ์ เราจะเพิ่มแอตทริบิวต์เสริม allowanceAspectRatio ให้กับแท็กรูปภาพ ซึ่งจะช่วยให้เราเติมรูปภาพของเรา “ตั้งแต่ต้นจนจบ” ให้ทั่วทั้งวงกลมได้

ฉันไม่สามารถเรียกวิธีนี้เป็นสากลได้ แต่สามารถใช้ได้ในกรณีพิเศษ ตัวอย่างเช่นหากเราพูดถึงหัวข้อของบล็อก วิธีนี้จะเหมาะกับอวตารของผู้เขียนที่เขียนบทความ

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS ได้ที่นี่:

ผลลัพธ์:
เราพิจารณาวิธีการครอบตัดรูปภาพบนเว็บไซต์ 3 วิธี: การใช้ภาพพื้นหลัง การใช้แท็ก img และเชื่อมโยงกับรูปแบบ svg ด้วยการฝังรูปภาพบิตแมปโดยใช้แท็กรูปภาพ หากคุณทราบวิธีการอื่นในการครอบตัดรูปภาพโดยใช้ SVG ให้แชร์ในความคิดเห็น มันจะมีประโยชน์ไม่เพียงแต่สำหรับฉันเท่านั้น แต่ยังให้คนอื่นรู้เกี่ยวกับพวกเขาด้วย

อย่าลืมถามคำถามเกี่ยวกับเลย์เอาต์หรือการพัฒนาส่วนหน้าจากผู้เชี่ยวชาญใน FrontendHelp ออนไลน์