javascript - 使用 Javascript 裁剪图像

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() 从裁剪的源坐标绘制 Canvas 内的图像, 也叫切片

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

自然地，市场份额仍然活跃的 Microsoft 浏览器可能需要他们自己的 hocus pocus、Flash 扩展或任何让 Redmond 高兴的东西。

另外，因为您很明显会进行图像过滤，所以您可能对此很感兴趣

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

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