วิธีการเปลี่ยนสีของภาพด้วย HTML5 Canvas ใน JavaScript

การใช้ Vanilla JS ธรรมดาสำหรับการแก้ไขภาพในเบราว์เซอร์

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

ตัวอย่างคลาสสิก —(1) การกลับสี & (2) รูปภาพระดับสีเทา

การใช้งานทั้งสองแบบอิงตาม "โมเดลสี RGB" ที่ใช้ในการเรนเดอร์อิมเมจของเบราว์เซอร์

(1) การกลับสี

/* HTML5 canvas element has attribute `id` = 'canvasDemo' */
const _canvas = document.getElementById('canvasDemo');
let w = _canvas.width;
let h = _canvas.height;

const imgData = _canvas.getContext('2d').getImageData(0, 0, w, h);

// Code logic: Apply required values for RGB components
for (let i = 0; i < imgData.data.length; i += 4) {
  /* START */
  let red = imgData.data[i];
  let green = imgData.data[i + 1];
  let blue = imgData.data[i + 2];
  let alpha = 255;
  
  imgData.data[i] = 255 - red;
  imgData.data[i + 1] = 255 - green;
  imgData.data[i + 2] = 255 - blue;
  imgData.data[i + 3] = 255;
  /* END */
}

ตรรกะของโค้ดระหว่าง /* START */ ถึง /* END */:

• imgData.data[i + 3] = 255;: หมายถึงความทึบของภาพ (กำหนดให้กับค่าคงที่)
• ลบค่าองค์ประกอบ RGB แต่ละค่าจาก 255 เพื่อให้ได้ค่าสีกลับด้าน

(2) ระดับสีเทา

เพื่อให้ได้เอฟเฟ็กต์ภาพระดับสีเทา องค์ประกอบทั้ง 3 อย่าง ได้แก่ สีแดง (R) สีเขียว (G) และสีน้ำเงิน (B) จะต้องมีค่าเท่ากัน

/* HTML5 canvas element has attribute `id` = 'canvasDemo' */
const _canvas = document.getElementById('canvasDemo');
let w = _canvas.width;
let h = _canvas.height;

const imgData = _canvas.getContext('2d').getImageData(0, 0, w, h);

// Code logic: Apply required values for RGB components
for (let i = 0; i < imgData.data.length; i += 4) {
  /* START */
  let red = imgData.data[i];
  let green = imgData.data[i + 1];
  let blue = imgData.data[i + 2];
  let alpha = imgData.data[i + 3];

  let gray = (red + green + blue) / 3;
      
  imgData.data[i] = gray;
  imgData.data[i + 1] = gray;
  imgData.data[i + 2] = gray;
  imgData.data[i + 3] = alpha;
  /* END */
}

ตรรกะของโค้ดระหว่าง /* START */ ถึง /* END */:

• let gray = (red + green + blue) / 3: เพื่อรับและตั้งค่าที่จำเป็นสำหรับแต่ละองค์ประกอบ RGB

การสาธิต (อย่าลังเลที่จะลองใช้ด้วยตัวเองที่ image-rgb-change)

หมายเหตุ: สามารถดูซอร์สโค้ดแบบเต็มได้ที่ GitHub repo ของฉัน รู้สึกอิสระที่จะ ⭐ หรือ 🔱 มัน! สาธิตที่ image-rgb-change

และคุณก็ได้แล้ว! ขอบคุณมากที่ยืนกรานจนถึงท้ายบทความนี้! ❤ หวังว่าคุณคงพบว่าบทความนี้มีประโยชน์ และอย่าลังเลที่จะ "ติดตามฉันบนสื่อ" หากคุณต้องการระบบสารสนเทศภูมิศาสตร์ (GIS) การวิเคราะห์ข้อมูล และเนื้อหาที่เกี่ยวข้องกับแอปพลิเคชันเว็บเพิ่มเติม จะซาบซึ้งจริงๆ - 😀

— 🌮 กรุณาซื้อทาโก้ให้ฉันหน่อย ξ(🎀˶❛◡❛)

อย่าลังเลที่จะตรวจสอบรายการแอปพลิเคชันแคนวาส HTML5 ด้านล่าง:

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter, LinkedIn, YouTube และ Discord .

สนใจที่จะขยายขนาดการเริ่มต้นซอฟต์แวร์ของคุณหรือไม่ ลองดูที่ วงจร