HTML 5 העלאת תמונות ומניפולציות בתמונות

מאמר זה הוא חלק מסדרת המאמרים העוסקת ב-HTML 5 Canvas. במאמר הקודם, דנו על אפקטים מיוחדים שאפשר לעשות עם HTML 5 canvas. הפעם אנו נדבר על תמונות. שימו לב שכרגע חלק מהאופציות עובדות רק עם גרסה 3.5 של שועל האש (שנמצאת נכון לעכשיו בבטא) או עם אופרה.

העלאת תמונות

אנחנו לא חייבים ליצור את התמונות שלנו לבד, אלא יכולים גם להעלות תמונות קיימות. ראשית, ניצור אלמנט canvas:

<script type="text/javascript">
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// בדיקה אם האלמנט אכן קיים כדי להמנע משגיאת ג'אווה סקריפט אם מדובר בדפדפן אינטרנט אקספלורר
if (elem && elem.getContext) {
  // התחלת ההתממשקות ל-context
  var context = elem.getContext('2d');
  if (context) {
    // כאן אפשר להתחיל ולכתוב את הצורה.
  }
}
</script>

ישנן שתי דרכים למשוך תמונה לתוך ה-canvas שלנו. הראשונה היא באמצעות var של JavaScript ו-getElementById המוכר. דרך זו יכולה לשמש אותנו למשיכת אלמנט canvas אחר. הדרך השניה היא העלאת תמונה ישירות ל-canvas ואותה אני אראה במאמר זה בשל פשטותה.

אחרי שיצרנו את ה-canvas, אנו ניצור אלמנט של תמונה. בדומה לכל אלמנט ב-canvas, גם תמונה צריכה להקרא בשם, ממש כמו משתנה לכל דבר. במקרה הזה:

var img = new Image();   // Create new Image object  

ואחרי כן יש לציין את המקור שלה.

img.src = '/internet_files/pseudo_class/icon.jpg'; // Set source path  

אחרי שעשינו את זה, והאלמנט של התמונה מוכן, הגיע הזמן לצייר אותו:

Your browser does not have support for Canvas.

// Get a reference to the element.
var elem = document.getElementById('myCanvas').getContext('2d');;
var image = new Image();   // Create new Image object  
image.src = 'https://internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image.onload = function(){
elem.drawImage(image,50,50);   
  }

הפונקציה פשוטה ביותר להבנה ואני לא חושב שאפשר להסביר אותה מעבר להסבר שניתן. יש פונקצית onload שהיא זו שיוצרת בפועל את התמונה במיקום שבחרנו. 0,0 זה הפינה השמאלית עליונה של ה-canvas שמידותיו נקבעות כמובן על ידינו. אפשר לצייר על התמונה הזו בכלים שלמדנו במאמר הקודם, לדוגמא:

Your browser does not have support for Canvas.

 // Get a reference to the element.
var elem2 = document.getElementById('myCanvas2').getContext('2d');;
var image2 = new Image();   // Create new Image object  
image2.src = 'https://internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image2.onload = function(){
elem2.drawImage(image,50,50);
   elem2.beginPath();
   elem2.moveTo(40,40);
   elem2.lineTo(80,40);
   elem2.lineTo(80,80);
   elem2.lineTo(40,80);
   elem2.lineTo(40,40);
   elem2.stroke();
  }
 

גם פה מדובר בקוד פשוט שאין מה להרחיב עליו.

עיבוד תמונה

ניתן לשנות את גודל התמונה באמצעות הוספת שני פרמטרים פשוטים לפונקצית drawImage, בנוסף למיקום. פרמטר רוחב X ופרמטר גובה Y. הפרמטרים הם בפיקסלים.

Your browser does not have support for Canvas.

והנה הקוד שבאמצעותו זה נעשה:

 // Get a reference to the element.
var elem3 = document.getElementById('myCanvas3').getContext('2d');;
var image3 = new Image();   // Create new Image object  
image3.src = 'https://internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image3.onload = function(){

elem3.drawImage(image,50,50, 150, 100);   
  }

פרמטרים נוספים שאפשר להכניס הם ארבעה פרמטרים לחיתוך התמונה. שניים ראשונים לקביעת מקום החיתוך והשאר לקביעת גובה ורוחב החיתוך: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Your browser does not have support for Canvas.

ואת זה עושים באמצעות הקוד הבא:

  // Get a reference to the element.
var elem4 = document.getElementById('myCanvas4').getContext('2d');;
var image4 = new Image();   // Create new Image object  
image4.src = 'https://internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image4.onload = function(){

elem4.drawImage(image,0,0,20,20,0,0,40,20);   
  }

כמובן שמדובר בקוד JavaScript, אז אפשר לשכפל ולהתפרע עם התמונות.

מניפולציה של פיקסלים בתמונות

כיוון שמדובר באובייקט, אפשר לעשות איתו הרבה דברים, דוגמא טובה למה שאפשר לעשות עם אובייקט שהוא תמונה הוא אפקטים ומניפולציה ברמת הפיקסל בתמונות. בדוגמא הבאה אני לוקח את התמונה החביבה ומעביר אותה פילטר של נגטיב באמצעות מעבר על כל הפיקסלים והיפוך שלהם.

Your browser does not have support for Canvas.

איך עשיתי את זה? פשוט מאד. עושים את כל השלבים כרגיל – אתחול ה-canvas, הצהרה על אובייקט תמונה ויצירתו, ציורו וכו' אבל קצת לפני, מעתיקים את אובייקט התמונה לאובייקט משלנו, באמצעות ה-API מעתיקים את כל הפיקסלים כמערך ואנחנו יכולים לעשות כל מה שמתחשק לנו איתם בדיוק כמו שפוטושופ עובד. במקרה הזה השתמשתי בפילטר שמבצע היפוך של הצבעים ליצירת אפקט נגטיב.

  // Get the canvas element.
  var elem5 = document.getElementById('myCanvas5').getContext('2d');;

 
  // Create a new image.
  var img = new Image();
 
  // Onload function
  img.onload = function(){
 
    // Draw the image on canva.
    elem5.drawImage(this, 0, 0);
 
    // Creating imgd object and using getImageData to copy the image data to it.
    var imgd = elem5.getImageData(0, 0, this.width, this.height);
    //creating the pixel array from the data parameter of imgd object
    var pix = imgd.data;
 
    // Loop over the Array that contains each pixel and invert the color. This function is the inverting function
    for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 255 - pix[i  ]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
    }
 
    // Draw the ImageData object.
    elem5.putImageData(imgd, 0, 0);
  };
 // The source of the picture is the last episode
  img.src = 'https://internet-israel.com/internet_files/pseudo_class/icon.jpg';

אפשר כמובן לצבוע את התמונה בצבעים, לשנות את הגוונים או את התאורה ושלל אפשרויות כמידת הידע והדמיון הטובה עליכם.