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

【问题标题】：Transform images into a circular variant, changing circle size and place将图像转换为圆形变体，改变圆形大小和位置
【发布时间】：2014-07-06 02:46:19
【问题描述】：

我喜欢圆形头像，但我讨厌你不能编辑它们。比如说你不想要中间的圆圈和标准尺寸，但你想要它更小或什么的。

图片说明：

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

现在，我希望您将一张普通图像放入其中，并且会有一个带有某种不透明度的黑色叠加层。在中间你会有一个透明的圆圈，这样你就可以在圆圈中选择你想要的部分。然后你可以按保存，就会生成一个.png文件。

我想用 jQuery 水印来做这件事，但我想不通。有人有想法吗？

【问题讨论】：

尝试查看画布和 SVG。将图像用作背景图像，然后对其进行一些画布或 svg 工作应该不难。
尝试在谷歌上搜索裁剪脚本

标签： javascript php jquery css image-processing

【解决方案1】：

有两种方法：

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

您也可以使用 HTML5 canvas - 规范中包含一个方便的 clip 方法（很简单 - 将绘制的图像限制在当前路径），您可以通过 canvas 元素的 toDataURL 方法获取图像数据，只要图像上传到同一个服务器（或者跨域规则做对了）。从 JS+HTML5 保存文件的最小搜索应该会有所帮助。

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

【讨论】：