问题标签 [image-clipping]

伙计们！

我有一些问题。我需要从 jpg 图像中剪切一些多边形图像并保存。此时我使用 OpenSlideJNI.openslide_read_region，但 OpenSlide 可以剪切唯一的矩形。

你有什么主意吗？

正如您在这张图片中看到的那样，按钮上设置的图片在没有明显原因的情况下被底部剪裁。图像为 24x24px 大，AutoSize按钮的属性设置为True.

该按钮直接位于窗口上，因此不会有任何布局影响其大小。

我需要一个允许用户用矩形剪辑图像的程序：

https://jsfiddle.net/w3qfLr10/58/

我希望当我单击画布上的不同位置时，程序会在该位置剪辑背景图像。但是，正如您从链接中看到的那样，每次单击鼠标时，屏幕都不会刷新。我希望背景只在最新的鼠标位置被一个矩形剪裁；相反，似乎所有的鼠标点击都剪掉了背景。Thanks

这是我的代码：

我试图垂直居中被剪裁的图像。图像是响应式的。在移动设备上，图像是全尺寸的，看起来不错。但是，当浏览器扩展为笔记本电脑时，图像的整个下半部分被裁剪掉，顶部没有任何内容被裁剪。

我试着玩弄 CSS 中的数字。如果图像的宽度约为 800 像素，它会显示得更好，但仍然会在底部完成所有剪切。

任何能使图像垂直居中并保持响应的想法将不胜感激。谢谢！

HTML：

CSS：

JavaScript：

我的目标是使图像变圆并显示。如果图像是方形的，那么我可以通过简单地使用border-radius:50%CSS 的属性将其转换为圆形。但是当图像是矩形时，使用这个 CSS 属性会给我椭圆形的图像。

我想到的一个解决方案是首先使用clip:rect(10px,0px,10px,0px)属性将矩形图像转换为正方形。通过使用它，它会将图像剪裁成正方形，但不会删除剪裁的空间。即它使该部分不可见，但图像仍然是矩形的。

剪辑的部分是不可见的，但仍然存在。所以即使现在我也在尝试使用border-radius:50%属性，它给了我椭圆形的图像，右侧和左侧被剪裁了。

有什么办法可以解决这个问题吗？

我一直在为我们的 CQC 家庭自动化平台开发基于 Typescript 的触摸屏客户端，但遇到了一些奇怪的事情。有很多地方可以在图像上叠加各种图形元素。当需要更新屏幕的某些区域时，我设置了一个剪辑区域并进行更新。

但我总是在所有东西周围都有一条线，这是图像后面的基础颜色填充的颜色。我当然责备自己。但是，最后，我没有自杀，而是做了一个小测试程序。

似乎表明 drawImage() 不包括剪辑路径边界，而颜色填充则包括。因此，对位于我正在更新的区域下方的图像部分进行 blitting 并不会完全填充目标区域，而是在该区域周围留下一条线。

在那个简单的程序演示了问题之后，我返回并进行图像更新，我将剪辑区域扩大了一个，但其他所有事情都不管它，现在一切正常。我在 Chrome 和 Edge 中对此进行了测试，以确保它不是一些错误，并且它们的行为完全相同。

奇怪的是，我从来没有在文档中看到任何关于剪辑路径是排他还是包含边界的声明，但肯定它不应该是一种原始类型的一种方式，而另一种类型的原始方式是另一种方式，对吧？

我有两个重叠divs，我试图达到以下效果：

为了做到这一点，我的逻辑是让两个 div 重叠，在第二个 div 内使用 SVG 创建该形状，并使用该形状剪切第二个 div 并显示它下面的内容（顶部 div）。

我不确定这是否是实现这一目标的最佳逻辑，如果是，我不确定如何使用 SVG 来剪辑 HTML 元素。

到目前为止，这是我的 HTML：

这是我的CSS：

这使得https://codepen.io/guillermocarone/pen/gXKpBx

我试图只显示图像的一部分，但是当我只想占据我正在显示的部分的高度时，它占据了整个图像的框内的高度。

在下面的示例代码中，请注意图像后面显示的浅蓝色背景。
我怎样才能防止这种情况？

目前我正在使用 Angular 和谷歌地图 API。我在谷歌地图上放了一些标记，并尝试将其更改为自定义图标。但是，在这种情况下，我想为一个图像文件放置多个图标并通过剪切来使用这些图标。

对于 CSS，我可以使用clip，但我不知道是否可以为谷歌地图的标记剪辑图像。有人知道它可用吗？或不？

我有一个 svg 文件，由 Google 绘图制作。（png版本如下图

svg代码如下

我的目的是将此svg图像插入到降价文件my_work.md中。如您所见，图像中有很多空白，我想将它们修剪掉，只显示有用的部分。在此示例中，有用的部分只是灰色圆圈。

我有一些一般的想法，但不知道如何实现它们。

• 直接方法：使用一些markdown技巧来修剪它。
• 间接方法：在 Python 中加载此图像并使用一些 Python 库对其进行修剪，导出修剪后的 svg-image 并在 md-file 中使用它。
• 间接方法：在谷歌绘图中修剪它。

你能告诉我怎么做吗？欢迎任何方法。我只需要显示图像的有用部分。请注意，我有很多 svg 文件，有用的部分可能不在图像的中心。