Javascript JS插件或CSS以六边形剪切图像

我对web脚本编写是新手。我正在寻找一个JavaScript或Jquery插件，它可以在（自定义提供的）维度上以六边形（附加图像）的形式裁剪图像。 理想情况下，如果可以通过CSS来完成，那就太好了，但如果不能，那么任何JS或JQuery插件都可以工作

---

以下是我对您想要的功能的尝试：

function polygonalCrop(options) {
    function extend(a, b){
        b=b||{};
        for(var key in b)
            if(b.hasOwnProperty(key))
                a[key] = b[key];
        return a;
    }

    options=extend({
        url:null,
        sides:8,
        angle:0,
        centerX:null,
        centerY:null,
        radius:null,
        outlineColor:null,
        outlineThickness:null,
        success:function(url){},
        fail:function(ev){}
    },options);
    if (!options.url) throw 'options needs an image URL as url property';
    var img=new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload=function() {
        var w=this.width;
        var h=this.height;
        var canvas=document.createElement('canvas');
        canvas.width=w;
        canvas.height=h;
        var ctx=canvas.getContext('2d');
        if (options.centerX===null) {
            options.centerX=w/2;
        }
        if (options.centerY===null) {
            options.centerY=h/2;
        }
        var ang=2*Math.PI/options.sides;
        var len=Math.sin(ang/2)*2;
        if (options.radius===null) {
            options.radius=Math.min(w/2,h/2)*Math.cos(ang/2);
        }
        ctx.translate(options.centerX,options.centerY);
        ctx.rotate(options.angle);
        if (options.outlineThickness) ctx.lineWidth=options.outlineThickness;
        if (options.outlineColor) ctx.strokeStyle=options.outlineColor;
        ctx.moveTo(-len/2,-options.radius);
        for (var i=0; i<2*Math.PI; i+=ang) {
            ctx.rotate(ang);
            ctx.lineTo(len/2,-options.radius);
        }
        ctx.closePath();
        if (options.outlineThickness && options.outlineColor) ctx.stroke();
        ctx.clip(); 
        ctx.rotate(2*Math.PI-i-options.angle);
        ctx.translate(-options.centerX,-options.centerY);
        ctx.drawImage(this,0,0);
        options.success(ctx.canvas.toDataURL());
    };
    img.onerror=function() { alert('there was an error loading the image'); };
    img.src=options.url;
}

function polygonalCrop（选项）{
功能扩展（a，b）{
b=b |{}；
for（b中的var键）
如果（b.hasOwnProperty（键））
a[键]=b[键]；
返回a；
}
选项=扩展({
url:null，
双方:8,，
角度：0，
centerX:null，
centerY:null，
半径：空，
大纲颜色：空，
OutlineHickness:null，
成功：函数（url）{}，
失败：函数（ev）{}
}，选项）；
如果（！options.url）抛出“options需要一个图像url作为url属性”；
var img=新图像（）；
setAttribute（'crossOrigin'，'anonymous'）；
img.onload=函数（）{
var w=此宽度；
var h=此高度；
var canvas=document.createElement（'canvas'）；
宽度=w；
画布高度=h；
var ctx=canvas.getContext（'2d'）；
如果（options.centerX==null）{
选项。centerX=w/2；
}
if（options.centerY==null）{
选项。中心Y=h/2；
}
var ang=2*Math.PI/options.sides；
var len=数学sin（ang/2）*2；
if（options.radius==null）{
选项半径=数学最小值（w/2，h/2）*数学cos（ang/2）；
}
ctx.translate（options.centerX，options.centerY）；
ctx.旋转（选项.角度）；
if（options.outlineThickness）ctx.lineWidth=options.outlineThickness；
if（options.outlineColor）ctx.strokeStyle=options.outlineColor；
ctx.moveTo（-len/2，-选项半径）；
对于（var i=0；iHi@Praveen Kumar，您共享的链接将span或div转换为六边形。如果您通读了我在本文中的描述，我正在寻找一种将图像转换为六边形的解决方案。我已经重新打开了post buddy。感谢您让我知道。祝您一切顺利。链接的URL显示了一个裁剪成多边形的图像。您知道吗需要将图像实际切割成六边形，以便保存后得到六边形吗？你不能使用CSS.Imho，只能使用canvas和Javascript。非常感谢，先生……只需一个简单的问题。我如何使它看起来与我在原始帖子中分享的图像完全一样？我已经更新了答案和小提琴。使用OutlineHickness和outlineColor属性绘制轮廓。使用角度旋转六边形。