將圖像變換爲圓形變體，更改圓圈大小和位置

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和background-size。爲了保存圖像，你需要一個簡約的PHP腳本，在服務器端做相同的操作（給定參數）並將圖像輸出給用戶。

您也可以使用HTML5畫布 - 規範涉及一個方便的clip方法（這很簡單 - 將繪製的圖像限制爲當前路徑），並且只要圖像上傳到圖像，您可以通過toDataURL方法獲取圖像數據同一臺服務器（或跨域規則正確）。從JS + HTML5保存文件的最小搜索應該會進一步提供幫助。

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