使用輸入類型“文件”將圖像存儲在瀏覽器存儲中-React.js

Question

當用戶從他/她的計算機中選擇圖像時，我正在嘗試將圖像存儲在瀏覽器存儲中。

<div className="add_grp_image_div margin_bottom">
     <img src={img_upload} className="add_grp_image"/>
     <input type="file" className="filetype"/>
     <span className="small_font to_middle">Add group image</span>
</div>

如上面的代碼所示，當有人單擊該div時，我將打開文件上傳窗口。 我想在上面給定的div中顯示所選圖像。 我該怎么做？

我的html部分看起來像這樣。

Answer 1

您無需存儲圖像即可將其顯示給用戶或對其進行操作。

要顯示圖像，請使用FileReader API。 該答案應該告訴您如何顯示所選的圖像

要處理圖像，您需要將其繪制在畫布上，然后執行選定的操作。 要在畫布上繪制，您可以按照此處所述進行操作

但是，如果您想裁剪它，我建議您搜索一個好的javascript圖像處理庫。 已經有n個庫已執行此操作。 它可以節省時間，而且您無需重新發明輪子就可以更快地學習。