用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 ...
随机推荐
- 浅谈web应用的高可用
1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安全 ...
- Amazon AWS EC2存储
- Google 打算用 QUIC 协议替代 TCP/UDP
有句话叫做一流企业定标准.二流企业做品牌.三流企业卖技术.四流企业做产品.Google 似乎在冲着一流企业的目标迈进.去年,Google 已经从以 SPDY 为基础的 HTTP 协议 16年 来的首个 ...
- Codeforces Round #258 (Div. 2)E - Devu and Flowers
题意:n<20个箱子,每个里面有fi朵颜色相同的花,不同箱子里的花颜色不同,要求取出s朵花,问方案数 题解:假设不考虑箱子的数量限制,隔板法可得方案数是c(s+n-1,n-1),当某个箱子里的数 ...
- php中Cookies
PHP Cookies cookie 是一种在远程浏览器端储存数据并以此来跟踪和识别用户的机制,PHP 透明地支持 HTTP cookie. cookie 常用于识别用户. Cookie 是什么? c ...
- CPU的load和使用率傻傻分不清(转)
转自: https://www.cnblogs.com/yunxizhujing/p/9382396.html 1. 什么是Cpu的Load 使用uptime.top或者查看/proc/loadavg ...
- 深入浅出 Java Concurrency (33): 线程池 part 6 线程池的实现及原理 (1)[转]
线程池数据结构与线程构造方法 由于已经看到了ThreadPoolExecutor的源码,因此很容易就看到了ThreadPoolExecutor线程池的数据结构.图1描述了这种数据结构. 图1 Thre ...
- linux命令快速手记 — 让手指跟上思考的速度(四)
pm2 list:列出pm2方式启动的所有程序 pm2 monit:显示每个应用程序的CPU和内存占用情况 scp:远程复制和本地上传,适用于本地ssh登录到远程服务器 scp root@10.10. ...
- 05_springmvc参数绑定
一.参数绑定的过程 从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上.springmvc中,接收页面提交的数据是通过方法形参来接收.而不 ...
- history配置
/etc/profile配置文件中,末尾增加如下参数项: HFILE=`who -m | awk '{print $1}'`readonly HISTFILE=/var/history/$HFILE- ...