การวาดรูปภาพใน Canvas (HTML5)

การวาดรูป
การวาดรูปภาพใน HTML5 Canvas เราจะใช้เมธอด drawImage(imageObj, x , y) ครับโดยมรา imageObj คือรูปที่จะมาวาด ส่วน x,y คือตำแหน่งของรูปที่จะวาดลงไป ก่อนที่เราจะเรียกใช้เมธอด drawImage() นั้นเราต้องกำหนด image object ไว้ล่วงหน้าก่อน จากนั้นค่อยโหลดรูปเข้าใน Canvas โดยใช้ onload ของ image object.

ตัวอย่าง : แท็กที่ใช้

ตัวอย่าง : การวาดรูป

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50); //โหลดรูปพร้อมระบุตำแหน่งที่จะสร้าง
      };
      imageObj.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfG41EIIXMRHXtD2zFHnfem2GCrU8J0jw7j064RR0H-7nUnjvYQjU_kmozfEby7DzSYApbtD7DCVhQUo3l_m7pniEfIHlGAol1oHgwoSJc96U_o20Y_R-iE_opKSa1L5FikuqQqPw8tyc/s1600/style_4.png'; // เตรียมรูปเก็บไว้ในตัวแปลก่อน

ผลลัพธ์ที่ได้คือ

การปรับขนาดรูป
ในการปรับขนาดของรูปนั้นเรายังคงใช้เมธอด drawImage() เดิม เพียงแต่เพิ่มพารามิเตอร์ของความกว้างกับความสูง drawImage(imageObj, x, y, width, height) เพิ่มเข้าไปเท่านั้น.
ตัวอย่าง : การปรับขนาดรูป

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 188;
      var y = 30;
      var width = 200;
      var height = 137;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, x, y, width, height); // เพิ่มตัวแปรที่ตั้งค่าความกว้างกับความสูง
      };
      imageObj.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfG41EIIXMRHXtD2zFHnfem2GCrU8J0jw7j064RR0H-7nUnjvYQjU_kmozfEby7DzSYApbtD7DCVhQUo3l_m7pniEfIHlGAol1oHgwoSJc96U_o20Y_R-iE_opKSa1L5FikuqQqPw8tyc/s1600/style_4.png';

ผลลัพธ์ที่ได้คือ 

การตัดรูป(Crop)
ในการตัดขนาดของรูปนั้นเรายังคงใช้เมธอด drawImage() เดิม โดยจะมีพารามิเตอร์เพิ่มเข้ามาดังนี้ drawImage(imageObj, x, y, width, height, destX, destY, destWidth, destHeight) ซึ่ง imageObj คือ image Object ที่จะวาด และ x, y เป็นพิกัด ของภาพต้นฉบับที่จะเริ่มต้น Crop และ width, height คือจะ Crop จากต้นฉบับกว้างยาวเท่าไร   สำหรับ destX, destY เป็นจดที่จะไปวาดที่ปลายทางที่จุดใด และสุดท้าย destWidth, destHeight กำหนดขนาดของภาพปลายทางจะให้กว้างยาวเท่าไร

ข้อควรระวัง : ในการ Crop ภาพคือเราจะต้องกำหนดส่วนที่ Crop นั้น อย่าเกินพื้นที่ของรูปภาพต้นฉบับเป็นอันขาด เช่น ภาพต้นฉบับมีขนาด 400x200 เมื่อเรา Crop แล้วต้องไม่เกิน เช่น crop ตั้งแต่ x = 10 y=50 และ ความกว้างที่จะ Crop กว้าง 50 และ สูง 50 ขนาดนี้ ได้ เพราะ 10 + 50 ไม่เกิน ความกว้างของภาพ และ 50 + 50 ไม่เกิน ขนาดความสูงของรูปภาพ

ตัวอย่าง : การตัดรูป

 
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var x = 150;
        var y = 0;
        var width = 150;
        var height = 150;
        var destWidth = width;
        var destHeight = height;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, x, y, width, height, destX, destY, destWidth, destHeight);
      };
      imageObj.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfG41EIIXMRHXtD2zFHnfem2GCrU8J0jw7j064RR0H-7nUnjvYQjU_kmozfEby7DzSYApbtD7DCVhQUo3l_m7pniEfIHlGAol1oHgwoSJc96U_o20Y_R-iE_opKSa1L5FikuqQqPw8tyc/s1600/style_4.png';

ผลลัพธ์ที่ได้คือ 

การโหลดรูป  
จากตัวอย่างก่อนหน้านี้เราทำการโหลดรูปภาพมาทีละรูป ต่อไปนี้เรามดูวิธีการโหลดรูปภาพหลายๆรูปพร้อมกันครับ.

ตัวอย่าง : การโหลดรูป

      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      // กำหนดรูปที่จะทำการโหลด
      var sources = {
        wood: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfG41EIIXMRHXtD2zFHnfem2GCrU8J0jw7j064RR0H-7nUnjvYQjU_kmozfEby7DzSYApbtD7DCVhQUo3l_m7pniEfIHlGAol1oHgwoSJc96U_o20Y_R-iE_opKSa1L5FikuqQqPw8tyc/s1600/style_4.png',
        nop: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9kBqCGmy_fhzeWuBnw617OAd6gTjocLO4WjU5UpXR-2w8qiZGYDMc4ej51dLSJ-9ihB_uJxhMkayEUJ5zNRKg0PCaIsgPPWJAcu_G1gItxuQ25hscUkw7JCt_q9SRc8gOC8Z6aS12Mc/s1600/IMG_2397.JPG'
      };

// โหลดรูป
loadImages(sources, function(images) {
        context.drawImage(images.wood, 100, 30, 200, 137);
        context.drawImage(images.nop, 350, 55, 93, 104);
      });

ผลลัพธ์ที่ได้คือ 

อ้างอิง : ที่นี่

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.