用canvas 画出圆形图片
/**
* 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
* @param {object} imgObj 图片(img)对象
* @param {number} imgType 设置生成图片的大小:0设置生成的图片大小是以图片设置的css大小为准,1设置生成的图片大小是以图片分辨率为准,默认值为0
* @return {string} return base64 png图片字符串
*/
function circle_image_v2(img, imgType) {
var type = imgType || 0;
var radius, diameter, canvas, ctx, natural;
if (type) {
if (img.naturalWidth > img.naturalHeight) {
radius = img.naturalHeight / 2;
} else {
radius = img.naturalWidth / 2;
}
} else {
if (img.width > img.height) {
radius = img.height / 2;
} else {
radius = img.width / 2;
}
if (img.naturalWidth > img.naturalHeight) {
natural = img.naturalHeight;
} else {
natural = img.naturalWidth;
}
}
diameter = radius * 2;
canvas = document.createElement('canvas');
if (!canvas.getContext) { // 判断浏览器是否支持canvas,如果不支持在此处做相应的提示
console.log('您的浏览器版本过低,暂不支持。');
return false;
}
canvas.width = diameter;
canvas.height = diameter;
contex = canvas.getContext("2d");
contex.clearRect(0, 0, diameter, diameter);
contex.save();
contex.beginPath();
contex.arc(radius, radius, radius, 0, Math.PI * 2, false);
contex.clip();
if (type) {
contex.drawImage(img, 0, 0, diameter, diameter, 0, 0, diameter, diameter);
} else {
contex.drawImage(img, 0, 0, natural, natural, 0, 0, diameter, diameter);
}
contex.restore();
return canvas.toDataURL('image/png');
}
传入要处理的图片对象,返回base64链接
//window.requestAnimationFrame 的兼容 if(!window.requestAnimationFrame){
window.requestAnimationFrame = (
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRquestAniamtionFrame ||
window.oRequestAnimationFrame ||
function (callback){
return setTimeout(callback,Math.floor(1000/60))
}
)
} 作者:犯迷糊的小羊
链接:https://www.jianshu.com/p/e70c9cfbdb38
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
参考链接:https://blog.csdn.net/fxss5201/article/details/79691923
用canvas 画出圆形图片的更多相关文章
- 用canvas画环形圆形图片
效果如图自动绘制不停歇 代码如下 var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canv ...
- 樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- 用.net在画出镂空图片
最近的一个项目需要用到这个东西,冥思苦想了好几天.还是在同事的帮助下,完成此项难题,希望能够帮助以后的博友们 ! 废话不多说,先看看效果图吧. 首先写一下讲一下思路,首先画一张图,当你的背景,然后在图 ...
- 如何将matlab画出的图片保存为要求精度
· 来源:http://emuch.net/bbs/viewthread.php?tid=2705843 杂志社对投稿图片的分辨率通常有如下要求: TIFF: Colour or greyscale ...
- 4种方法生成二维码 (js 控制canvas 画出 二维码)
随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计. 二维码原理: 二维条码/二维码可以分 ...
- 公告栏添加时钟——利用canvas画出一个时钟
前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...
- Android圆形图片不求人,自定义View实现(BitmapShader使用)
在很多APP当中,圆形的图片是必不可少的元素,美观大方.本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情. 一.先上效果图 二.实现思路 在定义View 的onMea ...
- 在android中画圆形图片的几种办法
在开发中常常会有一些需求,比方显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其它的一些形状. 可是往往我们手上的图片或者从server获取到的图片都是方形的.这时候就须要我们自己进行处理, ...
- 自定义View之一圆形图片
自定义View的方法 对现有控件进行扩展 通过组合来实现新的控件 重写View来实现全新的控件 本篇文章主要讲对现有控件的扩展 1.圆形图片控件 自定义View,对ImageView的扩展 重写onD ...
随机推荐
- Rainbow的信号
Rainbow的信号 有一串长度为n的数列,现在从中等概率选出l,r,如果l大于r,则交换,有三个询问 l~r间的数与和的数学期望 l~r间的数或和的数学期望 l~r间的数异或和的数学期望 对于100 ...
- ActiveMQ 传输协议
配置 ActiveMQ安装目录的conf/activemq.xml中的<transportConnectors>标签之内. 配置示例 TCP(默认协议,性能相对可靠) Transmissi ...
- WCF加密操作(包括证书和证书+帐号密码)
WCF作为.net三大组件之一,伟大之处不用多说,但是其加密配置对于我这样的萌新来说还是颇有难度,因此将几天来的研究成果共享出来,与各位共勉~ 首先声明我的开发环境,Win10创意者更新 + Visu ...
- 使用Ajax在HTML页面中局部刷新页面(左边菜单右边页面)
转载自:https://blog.csdn.net/Cenmen_17714/article/details/80969008 index.html <a href="javascri ...
- Servlet与Struts的区别
启动: ● Servlet:无 ● Struts:配置filter,设置struts入口 创建: ● Servlet:继承HttpServlet,重写doGet与doPost方法: 添加注解或配置we ...
- HBase Ganglia
- Grep- Linux必学的60个命令
1.作用 grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所 ...
- Hadoop构架概览
hadoop是一个开源的软件框架,是一个利用商业硬件处理和存储大型数据的软件.从下到上主要有五个主要的组成部分: 集群,是一套主机(节点)组成的.节点可以以机架划分.这个是硬件级别的构架. YARN构 ...
- windows API 第九篇 _tcslwr _strlwr _wcslwr _mbslwr
将字符串转化为小写Convert a string to lowercase. 函数原型: char *_strlwr( char *string ); //#include ...
- 安装postgresql11.5
root身份安装 创建用户 编译安装成功后,接下来要做的就是创建一个普通用户,因为默认超级用户(root)不能启动postgresql,所以需要创建一个普通用户来启动数据库,执行以下命令创建用户: [ ...