אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » HTML 5 העלאת תמונות ומניפולציות בתמונות

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

רן בר-זיק מאי 24, 2009 10:17 pm אין תגובות

מאמר המשך המספר על אפקטים ותמונות שאפשר ליצור באמצעות HTML 5 Canvas – הטכנולוגיה העתידנית שתהיה בכל דפדפן

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

מאמר זה הוא חלק מסדרת המאמרים העוסקת ב-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';

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML 5 Canvas – אפקטים
»תגיות סמנטיות ב-HTML 5
HTML 5
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד