file 選擇圖片後可選擇裁切位置？

Question

<input type="file" id="" name="" class="" accept="image/jpeg, image/png, image/jpg">

請問一下
我想讓使用者能夠上傳照片後
能夠選擇裁切的位置
就像facebook上傳大頭照、封面照一樣的功能
該如何做？

Answer 1

方案一，使用canvas，自身就可以处理图像。
方案二，使用img搭配img overflow,做出类似淘宝放大图的效果。等比缩放，计算数值，传给后端
方案三，使用数字与后端紧密结合，完成裁剪

Answer 2

使用裁剪插件比如jquery.jcrop