HTML5 Practice - การตั้งค่าภาพเป็นสีเทา

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

วัตถุประสงค์

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

แผนผังการสืบพันธุ์

รหัส jQuery

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

<script src = "jQuery.min.js" type = "text/javascript"> </script>

<script type = "text/javascript">

// ตั้งค่าเหตุการณ์การโหลดหน้าต่างเพื่อรอให้รูปภาพทั้งหมดโหลดก่อนทำงาน

$ (หน้าต่าง) .load (function () {

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

$ (". item img"). fadein (500);

// คัดลอกรูปภาพ

$ ('. รายการ img'). แต่ละ (ฟังก์ชั่น () {

var el = $ (นี่);

el.css ({"ตำแหน่ง": "สัมบูรณ์"}). wrap ("<div>"). clone (). addclass ('img_grayscale'). css ({"ตำแหน่ง": "Absolute", "z-index": "998"

var el = $ (นี่);

El.Parent (). CSS ({"width": this.width, "ความสูง": this.height});

El.Dequeue ();

-

this.src = grayscale (this.src);

-

// ทำให้รูปภาพเข้าสู่

$ ('. รายการ img'). mouseover (function () {

$ (นี่) .parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1,000);

-

$ ('. img_grayscale'). mouseout (function () {

$ (นี่) .stop (). animate ({ความทึบ: 0}, 1000);

-

-

// สร้างภาพสีเทาด้วยผ้าใบ

ฟังก์ชั่นสีเทา (src) {

var canvas = document.createElement ('Canvas');

var ctx = canvas.getContext ('2d');

var imgobj = ภาพใหม่ ();

imgobj.src = src;

canvas.width = imgobj.width;

canvas.height = imgobj.height;

ctx.drawimage (imgobj, 0, 0);

var imgpixels = ctx.getimagedata (0, 0, canvas.width, canvas.height);

สำหรับ (var y = 0; y <imgpixels.height; y ++) {

สำหรับ (var x = 0; x <imgpixels.width; x ++) {

var i = (y * 4) * imgpixels.width + x * 4;

var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;

imgpixels.data [i] = avg;

imgpixels.data [i + 1] = avg;

imgpixels.data [i + 2] = avg;

-

-

ctx.putimagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.height);

กลับ canvas.todataurl ();

-

</script>

วิธีใช้

ทำตามขั้นตอนด้านล่าง:

อ้างถึง jQuery.js

คัดลอกรหัสด้านบน

ตั้งค่าภาพเป้าหมาย (เช่น. post-img, img, .gallery img ฯลฯ )

นอกจากนี้คุณยังสามารถตั้งค่าความเร็วของภาพเคลื่อนไหว (เช่น 1,000 = 1 วินาที)

ความเข้ากันได้

ฉันลองใช้เบราว์เซอร์ทั้งหมดที่รองรับ HTML5 และ Canvas เช่น: Chrome, Safari และ Firefox หากเป็นเบราว์เซอร์ที่ไม่รองรับ HTML5 มันจะใช้ภาพต้นฉบับเท่านั้นและจะไม่สร้างภาพสีเทา

หมายเหตุ: หากไฟล์ HTML ในเครื่องไม่สามารถทำงานบน Firefox และ Chrome ได้คุณต้องปรับใช้ไฟล์ HTML ไปยังเซิร์ฟเวอร์

การปฏิบัติตัวเอง

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

จะต้องรับประกันว่าจะเป็นภาพท้องถิ่นมิฉะนั้นคุณต้องรายงานข้อผิดพลาดด้านความปลอดภัย

นี่เป็นเพราะ:

Canvas เป็นองค์ประกอบ Canvas ในมาตรฐาน HTML5 และสามารถใช้ในการวาดภาพ 2D และ 3D

อย่างไรก็ตามมันเป็นเรื่องง่ายที่จะพบปัญหาข้อผิดพลาดด้านความปลอดภัยระหว่างการดีบัก

ปัจจุบันข้อผิดพลาดด้านความปลอดภัยที่ฉันพบในระหว่างการดีบักส่วนใหญ่จะปรากฏบน todataurl () และ SRC

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

สถานการณ์ของการโยนข้อผิดพลาดด้านความปลอดภัย:

การใช้ภาพข้ามโดเมนในผืนผ้าใบ

การดีบักในสภาพแวดล้อมที่ไม่มีเซิร์ฟเวอร์ท้องถิ่น

ไม่สามารถรับความสัมพันธ์ระหว่างโดเมนปัจจุบันและภาพ

วิธีแก้ปัญหาบางอย่างที่พบใน Stackoverflow มักจะให้คุณแก้ปัญหาข้ามโดเมน

แต่ในความเป็นจริงถ้าคุณไม่ใช้ซอฟต์แวร์เซิร์ฟเวอร์ในระหว่างการดีบักในท้องถิ่นก็จะทำให้เกิดปัญหานี้

ตัวอย่างเช่น: ฟังก์ชั่น Todataurl ใช้ในระหว่างการดีบักในท้องถิ่นและไฟล์ภาพท้องถิ่นถูกใช้ในผืนผ้าใบ ใน Chrome และ Firefox ข้อผิดพลาดด้านความปลอดภัยจะยังคงถูกโยนทิ้ง

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