我是新来的编写网页的脚本。我正在寻找一种JavaScript或Jquery插件,以六角形(附图)的形式在(自定义提供的)尺寸上裁剪图像。 理想情况下,如果可以通过CSS完成,那将是非常好的,但如果没有,那么任何JS或JQuery插件都可以工作。JS Plug in or CSS以六角形切割图像
-2
A
回答
2
这是我在你想要的功能的尝试:
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;
}
它所做的是把你的网址和裁剪区域的值,并返回裁剪图像的传输数据的URL。你可以在这里看到它的动作:https://jsfiddle.net/psrec1b5/2/
+0
非常感谢先生......只是一个简单的问题。我如何让它看起来完全像我在原始帖子中分享的图片? – user3772369
+0
我已经更新了答案和小提琴。使用outlineThickness和outlineColor属性绘制轮廓。使用角度旋转六角形。 –
相关问题
- 1. 六角形图像
- 2. 六角形图像背景css
- 3. 使用CSS在六角形图像内插入矩形图像
- 4. 从图像切割矩形
- 5. 居中CSS六角形
- 6. 切割整形图像以显示潜在图像
- 7. Compiz-Snow Plug-In
- 8. Acceleo Plug-in
- 9. c# - 如何从图像中切割三角形?
- 10. 六角形图像在NS中查看
- 11. 带切割三角形的矩形
- 12. 平顶六角形六角形网格坐标以像素坐标
- 13. 以角js图像的URL
- 14. 带圆角的css三角形图像?
- 15. 在R中切割图形
- 16. 使用Matlab切割图形
- 17. 切出的CSS三角形
- 18. 3D六角形地图
- 19. 试图学习六角形
- 20. OpenCV上的图形切割
- 21. SQL:像OR与IN
- 22. Android - 旋转切割形状的角落
- 23. 图像的切出透明三角形
- 24. 以六角形的形状裁剪UIImage?
- 25. 与其他图像的CSS切割图像
- 26. 六角CSS(矩形与“箭效应”)
- 27. CSS六角形与内部元素
- 28. 水平六角形按钮css
- 29. 六角形网格tumblr css代码
- 30. 单div水平CSS六角形按钮
Hi @Praveen Kumar, 你已经共享的链接将span或div转换为六角形。如果您在本文中阅读了我的描述,我正在寻找将图像转换为hexa的解决方案。 – user3772369
我已重新打开帖子好友。谢谢你让我知道。祝一切顺利。 –
链接的URL显示以多边形形状裁剪的图像。你是否需要将图像切割成六边形,以便如果将它保存起来就可以得到六角形?你不能用CSS做到这一点。 Imho,只能用画布和Javascript。 –