JS Plug in or CSS that cuts an image in hexagon

Question

I'm new at scripting for web. I am looking for a JavaScript or Jquery plug-in that crops an image on (custom provided) dimensions, in form of a hexagon (attached image). Ideally it would be great if it could be done by CSS, but if not, then any JS or JQuery plugin may work.

Hi @Praveen Kumar, The link you have shared converts a span or a div to a hexagon. If you read through my description in this post, I'm looking for a solution that converts an Image to a hexa. — user3772369, Mar 27 '16 at 15:25
I have reopened the post buddy. Thanks for letting me know. All the best. — Praveen Kumar Purushothaman, Mar 27 '16 at 16:52
The linked URL is showing an image cropped in a polygonal shape. Do you need that the image be actually cut in a hexagonal shape so that if you save it you get the hexagon? You can't do this with CSS. Imho, only with canvas and Javascript. — Siderite Zackwehdex, Mar 27 '16 at 17:32

Siderite Zackwehdex · Accepted Answer · 2016-03-27T21:01:09.803

Here is my attempt at the function you want:

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;
}

What it does it take your URL and the values of the cropped area and returns the data URL of the cropped image. You can see it in action here: https://jsfiddle.net/psrec1b5/2/

Thanks so much sir... just one quick question. How do I make it look exactly like the image I shared above in the original post? — user3772369, Mar 27 '16 at 20:48
I've updated the answer and the fiddle. Use outlineThickness and outlineColor properties to draw an outline. Use angle to rotate the hexagon. — Siderite Zackwehdex, Mar 27 '16 at 21:01

JS Plug in or CSS that cuts an image in hexagon

1 Answers1