Javascript 插入图像并设置为画布中的圆形

这是我将图像插入画布的代码

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<button onclick="addTexttitle()" type="button" class="text-left btn-block btn white">Set Image To Circle</button>
<input type="file" id="file">
        <canvas id="canvas" width="750" height="550"></canvas>
        <a href='' id='txt' target="_blank">Click Me!</a>
        <br />
        <img id="preview" />

将图像设置为圆形

如何完成按钮：

<button onclick="addTexttitle()" type="button" class="text-left btn-block btn white">Set Image To Circle</button>

将图像设置为圆形

---

当我点击时，图像/元素将是圆形的

嗨，我已经创建了一个示例，请看一看，这肯定对你有用

var createCache=function（requestFunction）{
var cache={}；
返回函数（键、回调）{
如果（！缓存[key]）{
缓存[键]=$.Deferred（函数（Deferred））{
请求函数（延迟，键）；
}).promise（）；
}
返回缓存[key].done（drawImg）；
};
};
var loadImage=createCache（函数（延迟，url）{
var image=新图像（）；
函数清理（）{
image.onload=image.onerror=null；
}
然后（清理，清理）；
image.onload=函数（）{
延迟解析（url）；
};
image.onerror=defer.reject；
image.src=url；
});
var drawImg=函数（img）{
var tmpCanvas=document.createElement（'canvas'），
tmpCtx=tmpCanvas.getContext（'2d'），
图像=新图像（）；
image.src=img；
tmpCanvas.width=image.width*2；
tmpCanvas.height=image.height*2；
//将缓存的图像绘制到临时画布并返回上下文
tmpCtx.save（）；
tmpCtx.beginPath（）；
tmpCtx.arc（2*24，2*24，2*24，0，数学PI*2，真）；
tmpCtx.closePath（）；
tmpCtx.clip（）；
tmpCtx.drawImage（图像，0,0,4*24+2,4*24+2）；
tmpCtx.beginPath（）；
tmpCtx.arc（0,0,2,0，数学PI*2，真）；
tmpCtx.clip（）；
tmpCtx.closePath（）；
tmpCtx.restore（）；
$（'body'）.append（tmpCanvas）；
};
var cacheImgs=函数（）{
var imgs=[
'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg'
];
对于（变量i=0；i
canvas{float:left；}

尝试clipTo功能

img.set({
 clipTo: function (ctx) {
  ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
 }
});

此处已更新，半径为上传图像的一半
我认为OP正在寻找fabric.js解决方案。可能他没有标注尺寸，因此我认为这可能有用。感谢bro@Blindman67更新代码并删除不必要的控制台。