使用 Javascript 剪辑图像答案

【问题标题】：Clipping images with Javascript使用 Javascript 剪辑图像
【发布时间】：2013-02-17 07:41:41
【问题描述】：

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

【问题讨论】：

请问您能告诉我们您当前使用的代码吗？
jsfiddle.net/QktNN 当图片悬停时，您仍然可以看到边缘模糊。我什至尝试减小 .one img 的宽度和位置，但它什么也没做
请在帖子中添加一些代码，而不仅仅是链接到小提琴（尽管这也很有帮助）。除此之外，使用溢出：隐藏技术的示例似乎有锋利的边缘......？
该死，是的，这很棘手。好问题。我还没有找到通用的纯 CSS 解决方案。

标签： javascript css image-processing clip

【解决方案1】：

您可以通过 Javascript 剪辑任何图像

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

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/

【讨论】：