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 ...
随机推荐
- 快速安装pycharm,最详细的pycharm安装图文教程
大家都知道python的开发工具Pycharm吧,它是由JetBrains打造的一款Python IDE,它功能强大,已经是python开发者使用最多的编辑工具.首先,它支持多平台(Linux.WIn ...
- selenium.common.exceptions.WebDriverException: Message: ‘geckodriver’ executable needs to be in PATH
问题,找不到’geckodriver’ 的环境path,解决方案 下载geckodriver.exe 放到Firefox的安装目录下,如:(D:\火狐\Mozilla Firefox): 将火狐安装目 ...
- 模版include的用法
from flask import Flask,render_template app = Flask(__name__) @app.route('/') def hello_world(): ret ...
- Java 并发编程:volatile的使用及其原理(二)
一.volatile的作用 在<Java并发编程:核心理论>一文中,我们已经提到过可见性.有序性及原子性问题,通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果 ...
- SpringBoot_01
一.初识springboot 个人总结:springboot是一个开发更加便捷的spring的技术框架,通过引入启动器便可以快捷的让spring框架和其他框架进行整合, springboot很容易上手 ...
- 手写数字识别 卷积神经网络 Pytorch框架实现
MNIST 手写数字识别 卷积神经网络 Pytorch框架 谨此纪念刚入门的我在卷积神经网络上面的摸爬滚打 说明 下面代码是使用pytorch来实现的LeNet,可以正常运行测试,自己添加了一些注释, ...
- dhcp协议简介
协议分析 - DHCP协议解码详解 DHCP协议简介 DHCP,全称是 Dynamic Host Configuration Protocol﹐中文名为动态主机配置协议,它的前身是 BOOTP,它工作 ...
- Python 入门之 内置模块 --logging模块
Python 入门之 内置模块 --logging模块 1.logging -- 日志 (1)日志的作用: <1> 记录用户信息 <2> 记录个人流水 <3> 记录 ...
- Django 前端通过json 取出后端数据
Django 前端通过json 取出后端数据 前端通过json 取出后端数据 步骤1:后台数据通过 JSON 序列化成字符串a 注意:1.json是1个字符串 2.通过json.dumps('xx ...
- docker安装教程-centos
Docker 要求CentOS 系统的内核版本在3.10以上,查看本页面的前提条件来验证你的CentOS 版本是否支持Docker . 1.通过uname -r 命令查看你当前的内核版本 uname ...