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

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

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

 ตัวอย่าง : แท็กที่ใช้
?
1
<canvas height="200" id="myCanvas" width="578"></canvas>
ตัวอย่าง : การวาดรูป
?
1
2
3
4
5
6
7
8
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) เพิ่มเข้าไปเท่านั้น.
ตัวอย่าง : การปรับขนาดรูป
?
1
2
3
4
5
6
7
8
9
10
11
12
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 ไม่เกิน ขนาดความสูงของรูปภาพ
ตัวอย่าง : การตัดรูป
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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';

 ผลลัพธ์ที่ได้คือ 
การโหลดรูป  
จากตัวอย่างก่อนหน้านี้เราทำการโหลดรูปภาพมาทีละรูป ต่อไปนี้เรามดูวิธีการโหลดรูปภาพหลายๆรูปพร้อมกันครับ.
ตัวอย่าง : การโหลดรูป
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
      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.
    Blogger Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )