html5、js 和 css3 图像裁剪工具 [关闭]

Posted 2023-02-25

【中文标题】html5、js 和 css3 图像裁剪工具 [关闭]

【英文标题】：html5, js and css3 image crop tool [closed]

【发布时间】：2016-10-19 09:47:28

【问题描述】：

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

非常感谢

【问题讨论】：

向我们展示您迄今为止的尝试。此外，此网站不是我的代码服务。

这可以通过画布实现。

如何实现这一点的一个想法是只有一个 div（孔）并动态更改其边框尺寸以适应图像。边框颜色将是灰色 0.5 alpha 颜色编辑：@PeterB。我还没有做任何值得展示的事情。我没有要求任何代码，只是想知道如何完成

我会使用一个具有绝对定位和监听器的浮动 div 来移动/调整它的大小，就像一个窗口。某事like this

【参考方案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"  style="width: 30%;">
  <div class="hole"></div>

【参考方案2】：

这个怎么样：

带有位置的包装器：相对和溢出：隐藏 图片 绝对定位矩形，具有非常大的盒子阴影和透明背景

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

bodypadding:4px;
.wrapwidth:300px;margin:auto;position:relative;overflow:hidden

.wrap imgwidth: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)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<div class="wrap">
  <div class="mask"></div>
  <img src="https://www.fillmurray.com/460/300">
</div>

【讨论】：

;-( Jordi Flores 更快