需求場(chǎng)景：
移動(dòng)端項(xiàng)目，用戶上傳圖片，然后前端進(jìn)行濾鏡處理并加入文字在圖片上，返回給用戶處理過后的圖片，結(jié)果頁可分享。

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

• 第二個(gè)方案，用戶上傳圖片之后，前端立即將圖片上傳到七牛，再用canvas處理過后返回給用戶。
  過程中遇到了兩個(gè)問題：1.canvas載入七牛圖片的時(shí)候，有的圖片方向被翻轉(zhuǎn)了。2.canvas載入非本地（非相同域名下）圖片失敗，因?yàn)榭缬颉?/p>

解決辦法：設(shè)置img.crossOrigin和圖片鏈接參數(shù)

'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是圖片高級(jí)處理，參數(shù)auto-orient自動(dòng)旋正 },

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。