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绘制圆图输出图片格式的更多相关文章

  1. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  2. 小程序canvas绘制base64数据格式图片

    翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...

  3. 输出图片格式BARTENDER

    try {                BarTender.Application btApp = new BarTender.Application();                BarTe ...

  4. canvas 绘制刮刮卡

    思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...

  5. canvas绘制图片

    canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...

  6. MVC控制下输出图片、javascript与json格式

    /// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...

  7. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  9. C++ 输出PPM格式图片文件

    PPM简介 学习图形学时为了直观地观察结果,需要输出图片,而PPM是一种最简单的图片格式,非常适合新手使用. PPM文件的内容大概是这样的: 第一行固定为P3,代表写入的是PPM格式的RGB图像,除此 ...

随机推荐

  1. C# 构造函数中base和this的使用。

    使用base时,首先给父类中的构造函数赋值. 使用this时,先调用父类无参构造函数,再调用自身其他构造函数并对其赋值,最后调用自身当前构造函数.

  2. oracle数据库误删的表以及表中记录的恢复

    oracle数据库误删的表以及表中记录的恢复 一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: --1.从flash bac ...

  3. 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  输出 ...

  4. Prometheus

    官方网址:https://prometheus.io/ GitHub网址:https://github.com/prometheus/prometheus 软件下载地址:https://prometh ...

  5. ansible简介,简单实用

    Ansible ansilbe是实现自动化运维的工具,基于python开发,实现批量系统配置,批量程序部署,批量运行命令等功能. ansible是基于模块工作的,自身是没有批量部署的能力.真正具有批量 ...

  6. ARTS打卡计划第二周-Review

    本周review的文章是:https://medium.com/@hakibenita/optimizing-django-admin-paginator-53c4eb6bfca3 改篇文章的题目是: ...

  7. MongoDB基本语法

    建立连接 client = pymongo.MongoClient() 新建数据库 db = client["db_name"] 新建表 tble=db["table_n ...

  8. 红黑树(red-black tree)实现记录

    https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...

  9. rsync配置安装

    rsync安装 1.将rsync包解压,包链接: https://pan.baidu.com/s/1jHPosXC 密码: maay 2.进入rsync安装包运行命令: ./configure --p ...

  10. 转-CVE-2016-10190浅析-FFmpeg堆溢出漏洞

    本文转载自CVE-2016-10190 FFmpeg Heap Overflow 漏洞分析及利用 前言 FFmpeg是一个著名的处理音视频的开源项目,使用者众多.2016年末paulcher发现FFm ...