日期：2013-5-23??來(lái)源：GBin1.com

本文來(lái)自極客標(biāo)簽社區(qū)用戶webgeek的一個(gè)在線HTML5web開(kāi)發(fā)小技巧，幫助你使用html5的畫(huà)布功能來(lái)切割用戶上傳的大頭照。

在線調(diào)試

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

用來(lái)處理大頭照的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";

這個(gè)簡(jiǎn)單的方法可以幫助處理指定的用戶大頭照?qǐng)D片。

如果你有任何問(wèn)題，請(qǐng)去極客社區(qū)關(guān)注webgeek并且給他留言！

via webgeek@極客標(biāo)簽

來(lái)源：使用HTML5的Canvas畫(huà)布來(lái)剪裁用戶頭像

轉(zhuǎn)載于:https://www.cnblogs.com/gbin1/archive/2013/05/23/3094489.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。