使用HTML5的Canvas畫布來剪裁用戶頭像

日期：2013-5-23  來源：GBin1.com

本文來自極客標簽社區用戶webgeek的一個在線HTML5web開發小技巧，幫助你使用html5的畫布功能來切割用戶上傳的大頭照。

在線調試

例如需要剪裁的圖片如下：

用來處理大頭照的JS代碼如下：

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

imageObj.onload = function() {
  // draw cropped image
  var sourceX = 60;
  var sourceY =  0;
  var sourceWidth = 180;
  var sourceHeight = 180;
  var destWidth = sourceWidth;
  var destHeight = sourceHeight;
  var destX = canvas.width / 2 - destWidth / 2;
  var destY = canvas.height / 2 - destHeight / 2;
  context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src="http://www.gbtags.com/gb/networks/avatars/bb5effea-3c63-419c-8a7f-4c7b4729b415.png"; 

這個簡單的方法可以幫助處理指定的用戶大頭照圖片。

如果你有任何問題，請去極客社區關注webgeek並且給他留言！

via webgeek@極客標簽

來源：使用HTML5的Canvas畫布來剪裁用戶頭像