canvas绘制圆图输出图片格式
function drawCircleImage(url, callback) {
const canvas = document.createElement('canvas');
const img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = url;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
//获取图片宽高的最小值
let min = Math.min(img.width, img.height);
let r = min / 2;
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
ctx.clearRect(0, 0, img.width, img.height);
ctx.arc(img.width / 2, img.height / 2, r, 0, Math.PI * 2);
ctx.fill();
let base64 = canvas.toDataURL("image/jpeg");
callback(base64);
};
}
canvas绘制圆图输出图片格式的更多相关文章
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 小程序canvas绘制base64数据格式图片
翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...
- 输出图片格式BARTENDER
try { BarTender.Application btApp = new BarTender.Application(); BarTe ...
- canvas 绘制刮刮卡
思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...
- canvas绘制图片
canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...
- MVC控制下输出图片、javascript与json格式
/// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...
- C++ 输出PPM格式图片文件
PPM简介 学习图形学时为了直观地观察结果,需要输出图片,而PPM是一种最简单的图片格式,非常适合新手使用. PPM文件的内容大概是这样的: 第一行固定为P3,代表写入的是PPM格式的RGB图像,除此 ...
随机推荐
- C# 构造函数中base和this的使用。
使用base时,首先给父类中的构造函数赋值. 使用this时,先调用父类无参构造函数,再调用自身其他构造函数并对其赋值,最后调用自身当前构造函数.
- oracle数据库误删的表以及表中记录的恢复
oracle数据库误删的表以及表中记录的恢复 一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: --1.从flash bac ...
- Never Wait for Weights(带权并查集+路径压缩)
题目链接:http://acm.sdibt.edu.cn/vjudge/contest/view.action?cid=2209#problem/F !a b w 表示b比a大w ? a b 输出 ...
- Prometheus
官方网址:https://prometheus.io/ GitHub网址:https://github.com/prometheus/prometheus 软件下载地址:https://prometh ...
- ansible简介,简单实用
Ansible ansilbe是实现自动化运维的工具,基于python开发,实现批量系统配置,批量程序部署,批量运行命令等功能. ansible是基于模块工作的,自身是没有批量部署的能力.真正具有批量 ...
- ARTS打卡计划第二周-Review
本周review的文章是:https://medium.com/@hakibenita/optimizing-django-admin-paginator-53c4eb6bfca3 改篇文章的题目是: ...
- MongoDB基本语法
建立连接 client = pymongo.MongoClient() 新建数据库 db = client["db_name"] 新建表 tble=db["table_n ...
- 红黑树(red-black tree)实现记录
https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...
- rsync配置安装
rsync安装 1.将rsync包解压,包链接: https://pan.baidu.com/s/1jHPosXC 密码: maay 2.进入rsync安装包运行命令: ./configure --p ...
- 转-CVE-2016-10190浅析-FFmpeg堆溢出漏洞
本文转载自CVE-2016-10190 FFmpeg Heap Overflow 漏洞分析及利用 前言 FFmpeg是一个著名的处理音视频的开源项目,使用者众多.2016年末paulcher发现FFm ...