问题标签 [image-clipping]

我想（我已经完成了1-3）：

1. 从页面抓取图像
2. 将其添加到画布元素
3. 将图像剪辑到蒙版
4. 在图像周围移动（动画）蒙版

我已经完成了前 3 个，但不知道如何移动面具。请帮忙！

如何从画布上移动（动画）剪切蒙版以显示剪切图像的不同部分？

感谢您的任何想法！

我正在努力解决 SVG 剪辑路径缩放行为。我想缩放剪辑路径以适应它所应用的元素大小。我一直在阅读有关 clipPath 单元的信息，但无法正常工作。

这是我在不进行任何缩放的情况下尝试做的一个示例：http: //jsfiddle.net/1196o7n0/1/

...和 ​​SVG（主要形状和剪辑路径形状完全相同）：

现在，如果我定义一个视图框并使 SVG 缩放以适应文档的宽度和高度，则剪辑路径似乎没有缩放：http: //jsfiddle.net/1196o7n0/2/

关于如何完成这项工作的任何想法？我错过了什么吗？

二维画布提供了一个名为 draw image 的 api： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 其中sx是图像剪辑开始的位置。

http://www.w3schools.com/tags/canvas_drawimage.asp ,

我正在尝试使用 webgl 使用texImage2D渲染 2D 图像。我想检查是否有办法使用 webgl 实现剪辑。

我正在使用以下教程使用 webgl 渲染 2d 图像。 http://webglfundamentals.org/webgl/lessons/webgl-image-processing.html

原图：

用 drawImage(2D) 剪辑：

使用 webgl 进行剪辑：

我有两个图片链接。

原始图像 -

掩蔽图像 -

这是结果图像。

我怎样才能得到这样的结果？

我正在使用 css 找到某种方法 -clip-path : rect(....)但我找不到使用图像蒙版。

是否有基于给定路径（CGPath）剪辑图像块（UIImage）的标准方法？（路径是椭圆，星形，多边形......）我现在的问题与这个有关： AVCaptureStillImageOutput 区域选择 ，暂时没有答案，我仍然没有解决方案。

我用于测试目的的应用程序能够拍照并将其保存为 PNG 文件。下次启动应用程序时，它会检查文件是否存在，如果存在，则将存储在文件中的图像用作应用程序的背景视图。到目前为止一切正常。

我决定在这个应用程序中添加一个剪贴蒙版，这就是出错的地方。剪裁本身可以工作，但由于某种神秘的原因，剪裁的图像被扩展了。如果有人能告诉我我做错了什么，那将非常有帮助。

这是相关代码（如果需要，我可以提供更多信息）：

maskImage 函数是这样的（取自iOS UIImage 剪辑到路径并翻译为 Swift）：

当行：

被注释掉了，我看到了我的期望。

重新启动应用程序时，将下面的图片用作背景。

但是当它们存在时（未注释掉），我在重新启动应用程序时得到背景（当然在开始时拍摄相同的照片）：

如果一切正常，鼠标应该出现在椭圆夹内，其大小与第一张图片相同（没有像现在那样放大）。

如何使用 HTML 和 CSS 制作一个 div，其中包含一个图像，该图像被剪切和遮罩，使其看起来如下所示：

我一直在试图找到一种方法来做到这一点大约 2 个小时，但一无所获，所以我只是希望有人能指出我正确的方向。具体来说，我希望剪辑图像，使顶部两个角为圆形，并将其嵌入到具有四个圆角和 1/4 底部填充的 div 元素中，两个元素都经过转换，使其显示为右边缘比左边离观察者更远。

我目前有这个设计作品要创建。我最初使用 3 个独立的方形 div 容器构建它，这些容器带有刚刚从设计中剪裁出来的独立背景图像，但这对我来说感觉很僵硬（每次我们想要更改它时，我们都需要切碎并重新制作一个新图像) 以及笨重。理想情况下，我想在每个元素容器中使用一个图像，以便可以轻松更新它。这也节省了两个不必要的服务器请求，我赞成！

只是想投票看看是否有更好/更动态的方式来实现这一点。也许用javascript思考？任何帮助或正确方向的观点将不胜感激。下面是我目前如何构建它的概要。附件是设计模型的片段供参考。

HMTL

CSS

我正在通过 SVG 剪辑路径制作剪贴蒙版。我正在使用一个带有三个剪贴蒙版的 SVG 元素。

问题是我的 svg 得到了完整的窗口宽度和高度，因此图像也得到了完整的宽度和高度。

所以我想要的是在剪切路径内移动图像，以便我可以显示图像的实际区域

这是 Jsfiddle链接。

我不想改变图像的纵横比。如果有什么办法，请告诉我。

谢谢

我有一个 png 图像，其中包含黑色区域中的黑色和透明度。我需要绘制我的其他图像，并保持透明区域不变。我们在Java中使用graphic2d的所有可能性是什么？这是我要引用的PNG