日期：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 imagevar 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畫布來剪裁用戶頭像

轉載于:https://www.cnblogs.com/gbin1/archive/2013/05/23/3094489.html

總結

以上是生活随笔為你收集整理的使用HTML5的Canvas画布来剪裁用户头像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。