HTML5 - canvas : drawImage(1)

HTML

<canvas id="myCanvas" width="400" height="200"></canvas>
<canvas id="myCanvasCrop" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  var imgObj=new Image();
  imgObj.onload=function(){
    var imgWidth=imgObj.width*0.1;//根據原圖大小縮小寬90%
    var imgHeight=imgObj.height*0.1;//根據原圖大小縮小高90%
    cxt.drawImage(imgObj,0,0,imgWidth,imgHeight);
  }
  imgObj.src='https://c1.staticflickr.com/1/359/18606422976_a1fa874e07_k.jpg';//圖片導入
 
  var cxtC=$('#myCanvasCrop')[0].getContext('2d');
  var imgCrop=new Image();
  imgCrop.onload=function(){
    cxtC.drawImage(imgCrop,300,400,300,300,0,0,300,300);
  };
  imgCrop.src=imgObj.src;//兩個<canvas>使用同一張外部相片
});

主要使用function :

1. drawImage() - 在畫布上繪製圖片，drawImage('要使用的圖像<img>','素材圖片要擷取的x軸','素材圖片要擷取的y軸','素材圖片要擷取的寬','素材圖片要擷取的高','這張圖要放在<canvas>的x軸','這張圖要放在<canvas>的y軸','這張圖要放在<canvas>的寬','這張圖要放在<canvas>的高')。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/Lnhbh3ua/