Javascript 麦田怪圈脱离图像并设置为favicon

我希望能够从API中抓取一个图像（使用AJAX、JQuery），并能够从中裁剪出一个圆圈（使其成为圆形），并将其设置为该页面的favicon。我该怎么做（最好是在JS/Jquery中）

我已经能够使用JQuery将图像设置为favicon，但我似乎无法使其成为圆形（使用CSS的边框半径）

请帮忙

谢谢

仅供参考：我尝试了以下方法：

$（“head”）。为48x48图像追加（“”）

以下是解决方案：

document.querySelector（'input'）。addEventListener（'change'，函数（e）{
var输入=此；
var reader=new FileReader（）；
reader.onload=函数（e）{
//从文件中创建图像
var img=document.createElement（'img'）；
img.src=e.target.result；
//创建画布以将图像转换为base64
var canvas=document.createElement（'canvas'）；
canvas.width=img.width；
canvas.height=img.height；
var ctx=canvas.getContext（'2d'）；
圆形图像（ctx，0，0，canvas.width，canvas.height，5）；
ctx.clip（）；
//在画布上绘制图像（用户看不到）。
ctx.drawImage（img，0,0）；
ctx.restore（）；
document.body.appendChild（画布）；
//设置链接的属性以替换图标
document.querySelector（'#icon'）.setAttribute（'href'，canvas.toDataURL（））；
};
//开始阅读上传的图像
reader.readAsDataURL（input.files[0]）；
});
函数圆形图像（ctx、x、y、宽度、高度、半径）{
ctx.beginPath（）；
ctx.移动到（x+半径，y）；
ctx.lineTo（x+宽度-半径，y）；
ctx.直角曲线（x+宽度，y，x+宽度，y+半径）；
ctx.lineTo（x+宽度，y+高度-半径）；
ctx.直角曲线（x+宽度，y+高度，x+宽度-半径，y+高度）；
ctx.lineTo（x+半径，y+高度）；
ctx.直角曲线（x，y+高度，x，y+高度-半径）；
ctx.lineTo（x，y+半径）；
ctx.二次曲线（x，y，x+半径，y）；
ctx.closePath（）；
}

也许可以在画布上渲染，然后在画布上进行取整？CSS将100%不会在这里产生任何结果。我将如何做到这一点？也许这个答案将帮助你。。还有，OP希望在渲染之前将图像裁剪成一个圆形。我刚刚更新了我的代码@根本不需要投票否决。你可以发表评论，等上一个小时或者别的什么时候再投票。@MoshFeu你原来的回答没有抓住问题的要点，在标题中有一次，在问题中有两次。因此，我认为投反对票是值得的，但既然你已经修正了我的反对票，我将很高兴撤销我的反对票。@JLRishe我专注于问题的第一部分，从第二部分开始我就完全忘记了。这就是为什么我认为我们应该写一篇评论然后等待。无论如何，谢谢你。