canvas实现圆角图片 (处理原图是长方形或正方形)
/**
* 生成图片的缩略图
* @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;
tem.setAttribute("crossOrigin",'Anonymous')
img = tem;
}
img.onload = function(e) {
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();
}
} yuan_image('./images/cover.png')
/**
* 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
* @param {[type]} img 图片(img)对象或地址
* @return {[type]} return base64 png图片字符串
*/
function yuan_image(img) {
if (typeof img !== 'object') {
var tem = new Image()
tem.src = img
tem.setAttribute("crossOrigin",'Anonymous')
img = tem
}
var w, h, _canv, _contex, cli
img.onload = function(e) {
console.log(e)
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)
console.log(_canv.toDataURL())
return _canv.toDataURL()
}
}
canvas实现圆角图片 (处理原图是长方形或正方形)的更多相关文章
- Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- Android_BitmapShader实现圆形、圆角图片
转:http://blog.csdn.net/lmj623565791/article/details/41967509,本文出自:[张鸿洋的博客] 1.概述 记得初学那会写过一篇博客Android ...
- 【转】Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- Android实现圆形圆角图片
本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现 Shader实现 自定View加上使用Xfermode实现 /** * 根据原图和变长绘制圆形图片 * * @param ...
- 【Android】 图片编辑:创建圆角图片
创建圆角图片的方式大同小异,最简单的就是 9.png 美工做出来的就是.这种最省事直接设置就可以. 另外一种就是通过裁剪 这里的剪裁指的是依据原图我们自己生成一张新的bitmap,这个时候指定图片的目 ...
- Android Xfermode 实战 实现圆形、圆角图片
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42094215,本文出自:[张鸿洋的博客] 1.概述 其实这篇本来准备Androi ...
- Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
- 安卓图片载入之使用universalimageloader载入圆形圆角图片
前言 话说这universalimageloader载入图片对搞过2年安卓程序都是用烂了再熟悉只是了.就是安卓新手也是百度就会有一大堆东西出来,今天为什么这里还要讲使用universalimagelo ...
- Android Xfermode 真实 实现全面、圆角图片
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/42094215.本文出自:[张鸿洋的博客] 1.概述 事实上这篇本来准备Andro ...
随机推荐
- flutter详解路由栈(二)
前面,我们已经知道如何简单在路由栈中 push.pop 实例,然而,当遇到一些特殊的情况,这显然不能满足需求.学习 Android 的同学知道 Activity 的各种启动模式可以完成相应需求,Flu ...
- this引用逸出
1.定义 public class UnsafeClass { public UnsafeClass(Button button) { button.addActionListener(new Act ...
- cocos2dx基础篇(28) 布景层Layer的三个子类
[3.x] (1)去掉 "CC" [CCLayerColor] 颜色布景层CCLayerColor有两个父类:CCLayerRGBA.CCBlendProtocol.相信有 ...
- cocos2dx基础篇(1) Cocos2D-X项目创建
已经入行工作半年多时间了,以前都是把这些东西记录在有道云上面的,现在抽出些时间把以前的笔记腾过来. 具体的环境配置就不用说了,因为现在已经是2018年,只需要下载对应版本解压后就能使用,不用再像多年前 ...
- 配置本地访问远程Linux系统服务器的jupyter notebook
环境情况 远程服务器上配置了anaconda 本地主机没有安装anaconda(其实安不安装都无所谓,有浏览器就行) 配置步骤如下 登录远程服务器 生成配置文件 jupyter notebook -- ...
- 【神经网络与深度学习】【Matlab开发】caffe-windows使能Matlab2015b接口
[神经网络与深度学习][Matlab开发]caffe-windows使能Matlab2015b接口 标签:[神经网络与深度学习] [Matlab开发] 主要是想全部来一次,所以使能了Matlab的接口 ...
- Spring MVC 中使用AOP 进行事务管理--注解实现
注解实现实现事务管理很简单,和配置式差不多,配置文件的头文件也要加相应的支持.配置数据源,并开启事务管理支持即可. <bean id="transactionManager" ...
- nodejs实现服务端重定向
nodejs实现服务端重定向:https://www.jianshu.com/p/5a1500fcd713
- springcloud用法
springcloud用法 使用springcloud搭建微服务肯定要在父工程下面编写子工程 一.搭建eureka注册中心 1. 创建maven项目(在springboot项目下建立子工程eur ...
- PhpStorm配置Xdebug调试
安装xdebug 去官网下载对应版本的xdebug扩展 XDEBUG EXTENSION FOR PHP | DOWNLOADS 如何选择正确版本 输出phpinfo()函数的内容 查看输出页面的网页 ...