Question

我想使用html5，css3和javascript（jQuery）为图像制作裁剪工具。我在制作以下内容时遇到了麻烦：添加一个灰色，alpha = 0.5叠加div / span /在我要裁剪的图像上使用一个div div / span /中间显示图像真实颜色的任何内容。我希望能够在灰色蒙版内移动此洞，因此将在此洞中设置事件侦听器。这对html5和css3有用吗？我不关心js代码，我将自己做。

非常感谢

Answer 1

看一下这个例子：

然后你只需要用jquery事件（拖动）或其他任何东西移动.hole位置。

body {
  margin: 0;
  padding: 0;
}
.hole {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
  border-radius: 3rem;
}

<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="width: 30%;">
  <div class="hole"></div>

Answer 2

怎么样：

包装位置：relative和overflow：hidden
图像
绝对定位的矩形，具有非常大的盒阴影和背景透明

<script type="text/javascript">
  $(document).ready(function(){

    $("#delet").click(function(){
       if (!confirm("Are you sure you want to delete Member?")){
      return false;
    }
    });
});
</script>

$( function() {
    $( ".mask" ).draggable();
  } );

body{padding:4px;}
.wrap{width:300px;margin:auto;position:relative;overflow:hidden}

.wrap img{width:100%;display:block}
.mask{
  outline:1px solid white;
  cursor:move;
  position:absolute;
  top:20px;
  left:100px;
  width:80px;
  height:80px;
  box-shadow:0 0 0 900000px rgba(0,0,0,0.75)
}

html5，js和css3图像裁剪工具

2 个答案: