# 華研工程 討論/測試
### UI 功能
- [x] 上傳照片
- [x] 請求啟用相機權限
- [x] 串流鏡頭影像
- [x] 擷取照片
- [x] 照片置入 canvas
- [x] 去背
- [ ] 移除去背後多餘的透明背景
- [ ] 編輯 canvas 內容物
- [ ] 截圖
- [ ] 分享圖片
### 參考資料
- [HTML5 Image Capture from Devices](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
- [WebRTC API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)
- [Capturing an Image from the User](https://developers.google.com/web/fundamentals/media/capturing-images)
- [WebRTC Smaples](https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/canvas)
- [WebRTC adapter.js](https://github.com/webrtc/adapter)
- [react-konva](https://konvajs.org/docs/react/Intro.html)
- [react-canvas 介紹文章](https://engineering.flipboard.com/2015/02/mobile-web)
### DEMO
[連結](https://60a276992951230e6a616817--boring-neumann-282810.netlify.app/)

### 技術架構

Next.js SPA + Rails backend：這次路徑不多，也不用管理會員權限，所以蠻適合的
React in Rails

### 相關技術知識
解構賦值 + jsonapi.org

### 額外發現的進階議題（像時代比較大就會遇到）
component json化
後端跟 provider 溝通，再返回給前端JWT，每次JWT expire就去登入取得oauth token

### 相關連結
tensorflow
https://github.com/tensorflow/tfjs-models/tree/master/body-pix?fbclid=IwAR1miKVR4sfdZ7mDXcKCSxKxocA_HRxDs6SCCg7RyjEssynwJFVoK087pJA#bodypixdrawmask

trim image
https://ourcodeworld.com/articles/read/683/how-to-remove-the-transparent-pixels-that-surrounds-a-canvas-in-javascript
https://www.npmjs.com/package/trimpng

NSFW
https://github.com/infinitered/nsfwjs