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图像,除此 ...
随机推荐
- Mysql分表:Merge
merge是Mysql最简单的一种分表,Mysql自带的一个分表功能,Merge表并不保存数据,Merge表和分表是对应映射关系.demo: 创建分表:CREATE TABLE `user1` ( ` ...
- python并发编程基础之守护进程、队列、锁
并发编程2 1.守护进程 什么是守护进程? 表示进程A守护进程B,当被守护进程B结束后,进程A也就结束. from multiprocessing import Process import time ...
- Linux命令:内建命令
本文对内建命令进行归类,便于学习和记忆. 分类 内建命令 同义词 功能相反命令 定义&声明类 alias unalias declare typeset local reado ...
- java学习-- String
String 类的实例是不可改变的,所以你一旦创建了 String 对象,那它的值就无法改变了 String 类是不可改变的解析,例如: String s = "Google"; ...
- <Dare To Dream>团队项目用户验收评审
实验十二 团队作业8—团队项目用户验收评审 任务1:团队作业Beta冲刺 Beta冲刺第一天:http://www.cnblogs.com/Dare-To-Dream/p/9226994.html B ...
- ceph-deploy部署过程
[root@ceph-1 my_cluster]# ceph-deploy --overwrite-conf osd create ceph-1 --data data_vg1/data_lv1 -- ...
- Nginx+Keepalived(二)
Linux CentOS7安装Nginx 1.gcc 安装 安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境. yum install gcc-c++ 2.PCRE pcre- ...
- 【笔记】Python基础七:正则表达式re模块
一,介绍 正则表达式(RE)是一种小型的,高度专业化的编程语言,在python中它内嵌在python中,并通过re模块实现.正则表达式模式被编译成一系列的字节码,然后由C编写的匹配引擎执行. 字符匹配 ...
- PhoenixFD插件流体模拟——UI布局【Preview】详解
Liquid Preview 流体预览 本文主要讲解Preview折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Pr ...
- 使用电脑ODBC测试数据库连接方法
使用电脑ODBC测试数据库连接方法 一.打开电脑的控制面板——管理工具——数据源(ODBC),在用户dsn页面中点击添加按钮,选择IBM DB2 ODBC DRIVER,点击完成. 二.在弹出的配置页 ...