Question

我是网络脚本的新手。我正在寻找一个JavaScript或Jquery插件，以六边形（附加图像）的形式在（自定义提供的）尺寸上裁剪图像。理想情况下，如果可以通过CSS完成它会很棒，但如果没有，那么任何JS或JQuery插件都可以工作。

Answer 1

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

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

它的作用是使用您的网址和裁剪区域的值，并返回裁剪图像的数据网址。你可以在这里看到它：https://jsfiddle.net/psrec1b5/2/

JS插件或用六角形切割图像的CSS

1 个答案: