Question

到目前为止，我还没有找到任何可以使用clip属性替换的东西。我试过唱负利润无济于事。现在我最后的希望是javascript。我用谷歌搜索了它，但还没找到我想要的东西。

我想要的是剪辑图片的边缘，因此当模糊滤镜应用于图像时，边缘不会模糊但是很清晰。是的我确实使用了svg过滤器，但找不到使转换顺利进行的正确方法

<style>
#content{
background:#fff;
}

.one{
width:455px;
height:213px;
overflow:hidden;
display:inline-block;
vertical-align:top;
}

.one img{
position:relative;
top:-30px;
left:-7px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.one img:hover{
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
</style>

<div id="content">

<span class="one">
<a href="/"><img src="http://0.tqn.com/d/create/1/0/z/I/4/-/forthebirds.jpg" /></a>
</span>

</div>

Answer 1

您可以使用Javascript按

剪辑任何图像

创建剪裁区域大小的<canvas>标记
使用canvas.getContext().drawImage()从剪切的源坐标绘制画布内的图像，也称为切片

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images#Slicing

性质上仍然活跃市场份额的微软浏览器可能需要自己的hocus pocus，Flash扩展或任何让Redmond满意的东西。

另外，因为你很明显在做图像过滤，这可能是你很感兴趣的

http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

http://www.pixastic.com/lib/

使用Javascript剪切图像

1 个答案: