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

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

1. 最开始的想法是通过canvas处理本地图片，然后将canvas转成图片，再把转换的图片上传到七牛返回给用户。这里的问题是转换后的图片是base64格式的，不方便存储。所以放弃此方案。

2. 第二个方案，用户上传图片之后，前端立即将图片上传到七牛，再用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...

关键字：七牛上传图片, 七牛问题, canvas, 图片上传

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！