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. Image Storage

  2. MySQL Tips

    MySQL中的一些Tips,个人总结或者整理自网络 不明白为什么MySQL的很多材料中总是喜欢把联合(复合)索引和覆盖索引放在一块说事? 1,联合索引是一种索引的类型,指创建索引的时候包含了多个字段. ...

  3. hadoop fs -text和hadoop fs -cat的区别(转)

    转自:https://www.jianshu.com/p/4462613d3f57

  4. intellij idea在project下同时打开多个工程(maven工程)

    前提:我的工程都是maven工程   我有两个工程,一个是接口contract,一个是接口的具体实现server.想要同时在一个工作空间下展示,方便调试开发,加载后效果如下   idea有worksp ...

  5. docker+efk+.net core部署

    部署环境 centos7 本主要利用efk实现日志收集 一.创建docker-compose es地址:https://www.elastic.co/guide/en/elasticsearch/re ...

  6. freeswitch dialplan 基础

    freeswitch dialplan 基础 一.基础概念 dialplan 拨号方案 context 拨号表(块) extension  拨号去向 action  (拨号后执行的)动作 condit ...

  7. Exp5 MSF基础应用 20165110

    Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...

  8. PCIE4.0 简单介绍

    关于PCI-E的标准,可以从2003年说起,2003年推出了PCI-E 1.0标准,在三年之后就推出了PCI-E 2.0,而在4年后的2010年就推出了PCI-E 3.0,但是在2010年之后的6年里 ...

  9. Spring--基础介绍一:IOC和DI

    前面学习了Struts2和Hibernate. Struts2主要是用来控制业务层面逻辑和显示,告诉你什么时候走哪个action,跑去运行哪个class的什么方法,后面调到哪个jsp. Struts2 ...

  10. webpack 模块方法

    1. webpack的import和export不需要引入babel 其他ES6语法需要引入babel 2. import引入export导出的模块 3. import()模块分离  低版本浏览器想使 ...