使用七牛图片遇到的图片方向翻转问题

需求场景：
移动端项目，用户上传图片，然后前端进行滤镜处理并加入文字在图片上，返回给用户处理过后的图片，结果页可分享。

• 最开始的想法是通过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...