用Javascript裁剪图像

Question

用Javascript裁剪图像

3

到目前为止，我还没有找到任何可以替代使用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>