使用七牛圖片遇到的圖片方向翻轉問題

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

• 最開始的想法是經過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 something
    var canvas = document.getElementById('mycanvas');
    var img = new Image();
    img.onload = function(){
        //do something
        var 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...