首页风格
门户
博客

使用HTML5的Canvas画布来剪裁用户头像

日期:2013-5-23  来源:GBin1.com

使用HTML5的Canvas画布来剪裁用户头像

本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照。

在线调试

例如需要剪裁的图片如下:

webgeek

用来处理大头照的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画布来剪裁用户头像

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐