有两个函数一个缩放一个剪切成圆,都返回一个base64格式的png图片,直接放到image的src标签就可以使用
原图
缩放剪切成圆过后
/**
*生成图片的缩略图
*@param{[type]}img图片(img)对象或地址
*@param{[type]}width缩略图宽
*@param{[type]}height缩略图高
*@return{[type]}returnbase64png图片字符串
*/
functionthumb_image(img,width,height){
if(typeofimg!=='object'){
vartem=newImage();
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]}returnbase64png图片字符串
*/
functionyuan_image(img){
if(typeofimg!=='object'){
vartem=newImage();
tem.src=img;
img=tem;
}
varw,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把图片缩放并且剪切成圆形》对你有帮助，请点赞、收藏，并留下你的观点哦！
