上傳照片圖像會轉向 owentseng PTT批踢踢實業坊

作者: owentseng (owen) 2016-11-25 19:27:16

網站有一個功能是頭像上傳，
用pc使用上完全是沒有問題的，
但問題出在如果是手機開啟網站點擊上傳照片時，因為手機會自動開啟拍照功能，
拍完照片上傳之後照片就自動轉向90度了，但不是每一種手機都會轉向，查詢google也
都沒類似的問題，有換過其他插件，但都是一樣的情況，請問這個問題有改善空間嗎？

作者: hooy2013 (gogo) 2016-11-25 19:48:00

關鍵字 exif.js就是移動端裝置EX IOS會轉向要用exif去讓他轉回來GITHUB套件挺多的，我之前有用過JCROP

作者: owentseng (owen) 2016-11-25 19:53:00

原來如此我試試看。太感謝了

作者: ryan10328 (大鳥) 2016-11-25 20:24:00

我上禮拜有遇到，有寫成文章，可參考 http://ryan10328.blogspot.tw，但我是用server端的方式把圖片轉回來

作者: owentseng (owen) 2016-11-28 12:00:00

太感謝了但我測試一下如果是設定背景圖片好像就不能了我剛才把它改為img標籤可以用但是變成手機版正常 pc版本跟著轉了耶請問一定要用convas嗎？

作者: hooy2013 (gogo) 2016-11-29 11:07:00

你用什麼方法?

作者: owentseng (owen) 2016-11-30 18:14:00

嗨其實我不知道怎麼調用上網查很多exif 都是教怎麼獲取資訊但沒有寫調用的方法

作者: jenocool 2016-12-01 08:36:00

簡單來說是格式的問題，所以使用exif.js來取得圖片旋轉角度的資訊，再使用canvas依照角度調整成正常的樣子

作者: owentseng (owen) 2016-12-01 09:07:00

好的我看看convas怎麼旋轉Dotblogs.com.tw/Lapland/2015/09/25/153444我照這篇去設定還是失敗看樣子是跟上傳到後台的js有衝突到我把後台那段js先隱藏就能夠讀到canvas的

作者: jenocool 2016-12-02 08:02:00

流程應該是利用file tag上傳，利用exif.js取得旋轉角度，再依照角度畫在canvas上，再用toDataURL轉換成base64碼，傳給後端存成檔案，如果還有什麼問題可以私訊我

作者: owentseng (owen) 2016-12-03 12:06:00

好的還在奮戰

繼續閱讀