日期: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画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
html5 canvas画布绘制圆形时钟代码
本教程适合H5 Canvas绘图的初学者阅读,丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法,能创建简单的动画,能检测捕捉鼠标动作。
canvas拼图游戏,基于html + canvas画布实现
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
html5 canvas画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
html5 canvas 做画布,网页工具有画笔、粗细、颜色、橡皮擦、文字方块、上传图片、保存等功能,鼠标模拟手写输入,适合老师在线授课当黑板使用。
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。
[For Dummies] HTML5 Canvas 画布开发 傻瓜书 (英文版)
html5 canvas画布绘制燃烧的火焰动画特效,一簇火焰熊熊燃烧晃动着。
HTML5 canvas 画布 设计使用HTML5 canvas 画布 设计使用HTML5 canvas 画布 设计使用HTML5 canvas 画布 设计使用
QML--Canvas画布实现矩形圆形等圈定
HTML 5高级移动开发 Canvas画布详细内容讲解,实例教程,实例练习
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
涂鸦板 html5实现涂鸦板canvas 画布实现
HTML5 canvas画布实现的千纸鹤飞行动画特效源码.zip
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5 canvas画布实现3D森林中瀑布动画特效源码.zip
Canvas画布图片文字拼接合成,生成图片,输入内容,填写到图片上