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. MM-移动类型

    链接:SAP移动类型   移动类型 备注 业务类型 SAP中事务代码 备注 101 采购订单收货.生产订单收货 收货 migo CO11N顶层处理移动类型\跨工厂收货 102 采购订单收货冲销 收货 ...

  2. CAtia_打开提示:许可证过期怎么办

    CAtia_许可证过期怎么办:进计算机管理,点开服务和应用程序,点服务,找到DS License Server,在启动此服务的地方点启动,从而开启DS License Server.

  3. F查询和Q查询,事务及其他

    F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个我们自己设定的常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F ...

  4. MyEclipse和eclipse生成变量快捷键

    MyEclipse和eclipse生成变量快捷键MyEclipse和eclipse生成变量快捷键 一.MyEclipse快捷生成变量(两种):第一种: 光标放在该行的任意位置,按 Ctrl+2,会弹出 ...

  5. GDI+_从Bitmap里得到的Color数组值解决方案

    ' InkHin_ZhiZhuo ' Date :2019.2.18 ' E-mail lqx@tyningling.Top 'This function and Module is written ...

  6. Redis 数据类型归纳

    Redis的数据类型从整体上看,都是Key-Value键值对的模型,数据类型更确切地说,应该是Value的数据类型,比如string,set,list等,都是key值对应的Value的数据集合格式.不 ...

  7. linux 服务管理

    服务的分类 查看已安装的服务 RPM包安装的服务 chkconfig --list #查看服务自启动状态,可以看到所有rpm包安装的服务 ps aux #查看已启动的服务 源码包安装的服务 查看服务安 ...

  8. OOP的五大原则

    一:单一职责原则. 含义一方面是避免相同的职责分散到不同的类中:另一方面避免一个类承担太多职责. 二:接口隔离原则. 一个类对另一个类的依赖性应当建立在最小的接口上的. 就是定制化服务设计的原则. 三 ...

  9. PhoenixFD插件流体模拟——UI布局【Input】详解

    Liquid Input 流体输入 本文主要讲解Input折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Input 主 ...

  10. Linux samba多用户挂载

    samba 多用户挂载 通过multiuser挂载选项,使用基于密码验证和cifscreds实现访问控制在默认情况下,samba共享挂载后,是通过挂载时的验证来实现对挂载资源的访问控制.通过新的mul ...