需求場景：
移動端項目，用戶上傳圖片，然后前端進行濾鏡處理并加入文字在圖片上，返回給用戶處理過后的圖片，結果頁可分享。

• 最開始的想法是通過canvas處理本地圖片，然后將canvas轉成圖片，再把轉換的圖片上傳到七牛返回給用戶。這里的問題是轉換后的圖片是base64格式的，不方便存儲。所以放棄此方案。

• 第二個方案，用戶上傳圖片之后，前端立即將圖片上傳到七牛，再用canvas處理過后返回給用戶。
  過程中遇到了兩個問題：1.canvas載入七牛圖片的時候，有的圖片方向被翻轉了。2.canvas載入非本地（非相同域名下）圖片失敗，因為跨域。

解決辦法：設置img.crossOrigin和圖片鏈接參數

'FileUploaded': function(up, file, info) {var domain = up.getOption('domain');var res = eval('(' + info + ')');var sourceLink = domain + res.key;//獲取上傳文件的鏈接地址//do somethingvar canvas = document.getElementById('mycanvas');var img = new Image();img.onload = function(){//do somethingvar canHeight = $(".img").height();var canWidth = canHeight*(img.width/img.height);var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, canvas.width, canvas.height);canvas.width = canWidth;canvas.height = canHeight;ctx.drawImage(img, 0, 0, canWidth, canHeight);};img.crossOrigin = ''; //讓canvas可以正常載入跨域圖片img.src = sourceLink+'?imageMogr2/auto-orient'; //imageMogr2是圖片高級處理，參數auto-orient自動旋正 },

上面貼的是圖片上傳完成后執行的代碼，需要注意的是img.crossOrigin和img.src這兩個屬性要寫在img.onload的后面。
參考文檔：
http://developer.qiniu.com/co...
https://segmentfault.com/q/10...

總結

以上是生活随笔為你收集整理的使用七牛图片遇到的图片方向翻转问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。