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. laravel5.6中jquery+ajax分页

    public function shows(Request $request){ $p=$request->get("page"); $page=empty($p)?:$p; ...

  2. Java基础知识思维导图

     

  3. Leetcode_两数相加_python

    小编从今天起要开始分享一些Leetcode代码,通过好好练习编程能力,争取以后找一份好工作. 题目:两数相加 # Definition for singly-linked list. # class ...

  4. Hive学习笔记记录

    典型数据来源: 文件管理服务: FTP文件服务:采用c/s模式,用户可以通过不同的客户端实现文件的上传与下载. NFS文件服务:借助于TCP/IP协议实现网络文件共享 Samba文件服务:是一种在局域 ...

  5. Python中函数和方法的区别

    方法是一种特殊的函数属于某个类的的函数叫方法不属于某个类的函数叫函数 转自csdn https://blog.csdn.net/weixin_40380298/article/details/7825 ...

  6. ARTS打卡计划第一周-Share-系统字典模块的设计

    在软件开发的过程,经常有一些类型的字段信息:性别.学历.职级.车辆类别.公司类型.结算类型等.这些字段有2个特征:1是字段可选的类型是有限,2是字段可能会变化,我们把这种字段描述为字段字段.  本篇文 ...

  7. iframe父页面获取子页面元素方法

    1.window.frames["iframe的id"].contentDocument.getElementsByClassName("mycontainer" ...

  8. ajax 常用功能 结构分解

    ajax 和后台交互基本结构 0.触发的事件. 1.获取参数 2.url 3.请求方法get/post 4.对返回结果的处理 .done如果有返加 .fail 失败 $(function () { / ...

  9. 洛谷P3655 差分数组 树状数组

    题目链接:https://www.luogu.org/problemnew/show/P3655 不一定对,仅供参考,不喜勿喷,不喜勿喷. 先copy洛谷P3368 [模板]树状数组 2 题解里面一位 ...

  10. jquery-confirm使用方法

    简要教程 jquery-confirm是一款功能强大的jQuery对话框和确认框插件.它提供多种内置的主题效果,可以实现ajax远程加载内容,提供动画效果和丰富的配置参数等.它的特点还有: 可以使用键 ...