客戶端圖像處理（裁剪）

Question

我建立使用解析作爲我的後端的Web應用程序。註冊過程中

部分涉及用戶上傳和裁剪圖像之前，我把它傳遞到我的數據庫（圖片是用戶配置文件，類似於你會做的Twitter什麼的一部分）。

我已經想通了，上傳的部分（包括瀏覽器，然後到數據庫），但我不是讓用戶來處理圖像的信心。

大多數解決方案都涉及使用jCrop來獲得類似於示例here（儘管沒有PHP）的結果。

由於我使用的解析，是有一個客戶端的解決方案，工作得更好？解決方案的外觀如何？

謝謝！

傑西

Answer 1

基本上，我會走這條路：

1. 載入圖片爲<canvas>
2. 裁剪圖像：http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
3. 保存從畫布圖像：http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Here是一個很g ood教程。

聲明：我還沒有測試過，但我聽說這種方式工作。

還可以使用background-size:cover;或background-size:contain;避開討厭的尺寸問題。