使用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 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之Tab类总结

本文主要包括以下Tab类实现方式 FragmentTabHostFragment实现传统的ViewPager实现 FragmentManagerFragment实现ViewPagerFragmentPagerAdapter实现TabPageIndicatorViewPagerFragmentPagerAdapter FragmentTabHostFragment实现 布局文件 <?xml version"1.0"…

美日两位科学家获2018年度诺贝尔生理或医学奖

来源&#xff1a;科学网当地时间10月1日上午11时30分&#xff08;北京时间10月1日下午5时30分&#xff09;2018年度诺贝尔生理或医学奖获得者揭晓。今年该奖项的获得者分别是美国得州大学奥斯汀分校免疫学家詹姆斯艾利森&#xff08;James P. Allision&#xff09;和日本京都大…

Rejection sampling - 直观解释

如图&#xff0c;红线是我们想要从中采样的概率分布$f(x)$。 拿一个盒子把这个概率分布罩起来&#xff0c;假设盒子的上边缘是$p(x)$。随机地向盒子里撒点&#xff0c;即盒子里的均匀分布。位于$f(x)$下方点的横坐标&#xff0c;即是来自于$f(x)$的一组样本。从算法的角度讲&am…

Android之记住密码与自动登陆实现

本文主要讲述了利用sharedpreference实现记住密码与自动登陆功能 根据checkbox的状态存储用户名与密码将结果保存在自定义的application中&#xff0c;成为全局变量 布局文件 <?xml version"1.0" encoding"utf-8"?> <ScrollView xmlns:andro…

智能硬件这5大领域竞争升级,将迎发展新模式

来源&#xff1a;亿欧网智能硬件是指具备信息采集能力&#xff0c;并可实现智能感知、交互、大数据服务等功能的新兴互联网终端产品&#xff0c;是“互联网人工智能”的重要载体。在手机、电视等终端产品实现智能化之后&#xff0c;信息技术也正通过软硬件结合的方式&#xff0…

Android实现圆形圆角图片

本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现Shader实现 自定View加上使用Xfermode实现 /** * 根据原图和变长绘制圆形图片 * * param source * param min * return */ private Bitmap createCircleImage(Bitmap source, int min) { final Pain…

自动驾驶又陷“派系”之争:该约束行人还是让车更完美

来源&#xff1a;网易智能摘要&#xff1a;近日&#xff0c;全球人工智能专家吴恩达&#xff08;Andrew Ng&#xff09;表示&#xff0c;制造可靠自动驾驶汽车的最快方法是在行人方面采取完善措施&#xff0c;而不单是汽车。他说&#xff1a;“我们想告诉人们的是&#xff0c;请…

AjaxPro新发现-错误处理

当Ajax调用发生错误时,回调函数参数result会存在error属性,通常通过这个属性判断是否出现错误. 也可以使用默认处理函数,这样就可以为错误处理提供统一的函数 转载于:https://www.cnblogs.com/dwfbenben/archive/2013/05/24/3097535.html

Android仿微信界面

效果图 原理介绍 1、先绘制一个颜色&#xff08;例如&#xff1a;粉红&#xff09; 2、设置ModeDST_IN 3、绘制我们这个可爱的小机器人 回答我&#xff0c;显示什么&#xff0c;是不是显示交集&#xff0c;交集是什么&#xff1f;交集是我们的小机器人的非透明区域&#xff…

Google Brain与牛津大学主持最新《计算机视觉前沿》报告(146页PPT)

来源&#xff1a;专知牛津大学DanielaMassiceti, Saumya Jetley与Google Brain Sara Hooker等人9月13日在Deep LearningIndaba 深度学习大会上主持关于《计算机视觉前沿》的报告。重点围绕当前计算机视觉最重要但没有解决的一些问题&#xff0c;以及如何和非洲相关&#xff1f;…

89C52控制1602A液晶的计时器

一、LCD1602A液晶说明。 DataSheet说明&#xff08;技术参数&#xff09; ①此LCD共16个管脚。每个接口说明如下表。 PS&#xff1a;1-2管脚没什么好说的&#xff0c;就是接电源和地的。 3管脚是偏压信号&#xff0c;这一管脚一般可以接个滑动变阻器&#xff0c;通过调节滑动变…

重磅 | 中国工程院提出新一代智能制造

来源&#xff1a;WPR近日&#xff0c;中国工程院院刊《Engineering》推出最新观点性文章“走向新一代智能制造”&#xff0c;作者周济、李培根、周艳红等&#xff0c;文章指出智能制造是一个不断演进发展的大概念&#xff0c;可归纳为三个基本范式&#xff1a;数字化制造、数字…

C# Obsolete

Obsolete 属性将某个程序实体标记为一个建议不再使用的实体。每次使用被标记为已过时的实体时&#xff0c;随后将生成警告或错误&#xff0c;这取决于属性是如何配置的。例如&#xff1a; 上面在Main函数中调用&#xff0c;只产生了一个警告的信息。 如果将MyObsolete类中的Get…

Android之事件分发机制

本文主要包括以下内容 view的事件分发viewGroup的事件分发 首先来看两张图 在执行touch事件时 首先执行dispatchTouchEvent方法&#xff0c;执行事件分发。再执行onInterceptTouchEvent方法&#xff0c;判断是否中断事件&#xff0c;返回true时中断&#xff0c;执行自己的on…

Android屏幕适配总结

重要概念 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度&#xff1f; 什么是dp、dip、dpi、sp、px&#xff1f;他们之间的关系是什么&#xff1f; 什么是mdpi、hdpi、xdpi、xxdpi&#xff1f;如何计算和区分&#xff1f; 在下面的内容中我们将介绍这些概念。 屏幕尺寸 屏幕…

突然开掉CEO!通用电气时隔一年再换帅,金融和工业互联网都救不了GE?

资料来源&#xff1a;GE官网、华尔街见闻、腾讯新闻《一线》物联网智库 整理发布摘要&#xff1a;在统帅了通用仅仅14个月之后&#xff0c;John Flannery就被他的继任者Lawrence Culp取代&#xff0c;而Culp也将立刻走马上任&#xff0c;成为通用电气&#xff08;GE&#xff09…

美法加三位科学家获2018诺贝尔物理学奖

来源&#xff1a;科学网北京时间10月2日下午5时52分&#xff0c;2018年诺贝尔物理学奖揭晓。获奖者为美国科学家阿瑟阿什金&#xff08;Arthur Ashkin&#xff09;、法国科学家热拉尔穆鲁&#xff08;Gerard Mourou&#xff09;和加拿大科学家唐娜斯特里克兰&#xff08;Donna …

Android自定义progressBar

通过继承系统ProgressBar实现 效果图 实现 HorizontalProgressBarWithNumber 自定义属性 <?xml version"1.0" encoding"utf-8"?> <resources><declare-styleable name"HorizontalProgressBarWithNumber"><attr name&…

干货分享:自动驾驶核心技术进展之车用毫米波雷达

来源&#xff1a;智车科技摘要&#xff1a;电动化、智能化、网联化、共享化是汽车未来发展的大势。伴随着这一趋势&#xff0c;自动驾驶汽车应用而生&#xff0c;且国内很多自动驾驶研发企业快速成长。“自动驾驶”等相关热词也一直是行业关注的焦点。为了让中国汽车行业的机构…

Android主题换肤实现

本系列文章主要是对一个Material Design的APP的深度解析&#xff0c;主要包括以下内容 基于Material Design Support Library作为项目整体框架。对应博文&#xff1a;Android Material Design 兼容库的使用详解RecyclerView的万能适配器。对应博文:打造一个RecyclerView的万能…