将图像转换为圆形变体，更改圆形大小和位置

Question

我喜欢圆形个人资料图片，但我讨厌你无法编辑它们。比方说，你不希望圆圈在中间和标准尺寸，但你想要它更小或什么。

图片说明：

The 4 images, from bottom to top: input, image editor, moving circle, output

现在，我希望您将正常图像放入其中，并且会出现具有某种不透明度的黑色叠加层。在中间，您将拥有一个透明圆圈，以便您可以在圆圈中选择所需的部分。然后你可以按保存，然后会有一个.png文件。

我想用jQuery水印来做这件事，但我无法解决这个问题。有人有想法吗？

Answer 1

有几种方法：

您可以使用CSS2 / 3 - corner-radius（对于较新的浏览器）或甚至只是叠加图片，可以裁剪图像，并可以通过CSS background-position和{{缩放/移动背景1}}因此。要保存图像，您需要一个简约的PHP脚本，在服务器端执行相同的操作（给定参数）并将图像输出给用户。

你也可以使用HTML5画布 - 规范涉及一个方便的background-size方法（很简单 - 将绘制的图像限制为当前路径），你可以通过canvas元素的clip方法获取图像数据只要图像上传到同一台服务器（或者跨域规则正确完成）。从JS + HTML5中保存文件的最小搜索应该会有所帮助。

示例jsfiddle - http://jsfiddle.net/u2A7t/