如何使用js在網絡瀏覽器中裁剪圖像並將其保存在服務器上？

Question

我正在尋找一些jQuery插件或類似的東西。

例如，我需要在網站上裁剪照片並將結果保存在服務器上。

我知道最好在Adobe Flash中執行此操作，但是我確實需要使用JS。

Answer 1

很少有瀏覽器支持使用Javascript選擇圖像並對其進行操作，而無需先將其上傳到服務器。 相反，您需要：

1. 允許用戶將圖像上傳到服務器
2. 上傳完成后，將圖像（使用PHP）調整為可管理的大小，以供瀏覽器預覽
3. 在瀏覽器中以JCrop之類的方式顯示調整后的預覽圖像
4. 用戶選擇裁剪區域后，讓他們單擊“保存”
5. 在“保存”上，將裁剪區域的坐標傳遞到服務器/ PHP以使其裁剪原始圖像。 您必須將預覽的坐標縮放為原始圖像的坐標。
6. 使用PHP將新映像保存到磁盤/ S3 /任何文件

我設法做到了這一點，而無需使用服務器或使用http://transloadit.com/使圖像觸摸服務器。 我使用transloadit的Javascript上傳表單將其上傳到服務器存儲（S3），並使用一個模板保存原始文件並調整其大小以進行預覽。 原始和預覽都存儲在transloadit的臨時S3帳戶中，而不是我的帳戶中。 然后，我使用JCrop向用戶顯示預覽。 一旦他們選擇了裁剪區域，我就告訴Transloadit裁剪原始照片，但是要使用我的裁剪坐標（根據預覽圖像縮放以適合原始圖像），該模板也使用幾個縮略圖大小。 然后，Transloadit將所有圖像保存到我的S3帳戶，並告訴我URL保存位置。

Answer 2

簽出jCrop 。 這是完美的東西。

Answer 3

您在尋找JCrop

這是一些演示 。

這是在PHP上實現的示例 。