javascript - 使用css3在图像上生成轮廓效果

Question

如何使用 css3 或 javascript 实时生成类似于此图像的轮廓效果？

http://i.imgur.com/1OEnuKF.jpg

Answer 1

这是使用滤镜和背景混合实现的类似效果

div {
        width: 180px;
    height: 400px;
    display: inline-block;
}

.test {
    background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg); 
    background-position: 0px 0px, 3px 3px;
    background-size: cover;
    background-blend-mode: difference;
    -webkit-filter: blur(1px)invert(1);
}

.target {
    background: url(http://i.imgur.com/1OEnuKF.jpg); 
    background-position: top right;
    background-size: cover;
}

<div class="test"></div>
<div class="target"></div>

图像的左侧部分是从原始图像获得的；右手是目标图像。