html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形

有两个函数一个缩放一个剪切成圆,都返回一个base64格式的png图片,直接放到image的src标签就可以使用

原图

缩放剪切成圆过后

/**

* 生成图片的缩略图

* @param {[type]} img 图片(img)对象或地址

* @param {[type]} width 缩略图宽

* @param {[type]} height 缩略图高

* @return {[type]} return base64 png图片字符串

function thumb_image(img, width, height) {

if (typeof img !== 'object') {

var tem = new Image();

tem.src = img;

img = tem;

}

var _canv = document.createElement('canvas');

_canv.width = width;

_canv.height = height;

_canv.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);

return _canv.toDataURL();

}

/**

* 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理

* @param {[type]} img 图片(img)对象或地址

* @return {[type]} return base64 png图片字符串

function yuan_image(img) {

if (typeof img !== 'object') {

var tem = new Image();

tem.src = img;

img = tem;

}

var w, h, _canv, _contex, cli;

if (img.width > img.height) {

w = img.height;

h = img.height;

} else {

w = img.width;

h = img.width;

}

_canv = document.createElement('canvas');

_canv.width = w;

_canv.height = h;

_contex = _canv.getContext("2d");

cli = {

x: w / 2,

y: h / 2,

r: w / 2

};

_contex.clearRect(0, 0, w, h);

_contex.save();

_contex.beginPath();

_contex.arc(cli.x, cli.y, cli.r, 0, Math.PI * 2, false);

_contex.clip();

_contex.drawImage(img, 0, 0);

_contex.restore();

return _canv.toDataURL();

}

html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形相关推荐

ios wkweb设置图片_iOS WKWebView识别H5中的图片资源
想获取H5的图片坐标那就需要JS注入了 - (void)handleSingleTap:(UITapGestureRecognizer *)recognizer { CGPoint touchPoin ...
关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
android图片gif动画效果,android中类似于gif 实现图片的动画效果
案例:实现gif动画效果,连续播放图片由于是转载的,也就没必要多说,直接上代码案例:在android中实现gif动态图片的效果: EarthAnimationActivity.java packa ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
java解析pdf 图片文字_Java 读取PDF中的文本和图片
本文将介绍通过Java程序来读取PDF文档中的文本和图片的方法.分别调用方法extractText()和extractImages()来读取. 使用工具:Free Spire.PDF for Java ...
【Latex】高级插入图片技巧：双栏中如何正确插入图片 + 如何多图
一.双栏中正确使用图片 [问题描述] 貌似multicols环境中不能放图片,即 \begin{multicols}{2} \begin{figure} \centering \includegrap ...
html中body如何设置图片,如何调整body标记中的html背景图片的大小
我想在我的html中使用背景图片(bg.png),但我想调整图片的大小,所以它会始终填充整个页面.我这样做是这样的:如何调整body标记中的html背景图片的大小 .stretch { width:1 ...
android添加图片按钮,如何给Android中的按钮添加图片功能
在layout中建一个my_login.xml文件代码如下 android:layout_width="fill_parent" android:layout_height=&q ...
h5背景图片尺寸怎么设置_CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）...
本文目标: 1.掌握background-size背景图片大小的几种设置方法问题: 1.实现以下效果,使用纯DIV+CSS,必须使用background-size 附加说明: 1.背景图片大小本身是 ...
如何解决H5中获取相机与图片，在苹果手机获取不了文件选择图片的问题
在安卓手机上获取相机并且可以选取图片,完整的写法是: <input type="file" accept="image/*" capture=" ...

html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形

html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形相关推荐

最新文章

热门文章