“Base64：数据界的云存储是个便利小器，某一天他踩着白色祥云来渡我，我猜中了前后，可是我却走岔了路。”
——题记，改编源自《大话西游》
前文
近期做H5项目的时候，遇到上传图片的问题：手机里拍摄后看着明明是正的照片，在H5显示之后，就上下左右“乱跳”了。究其原因是原始图片会有自己的参数，而相机当时的拍摄旋转方向不同，则会导致旋转参数不同，进而显示的图片方向不正。未来语：如果之后手机照片能自动设置的话，H5就省事不少了。
H5显示图
H5理论图
至于H5如何上传显示图片，可采取FileReader ，readAsDataURL() 读取指定File对象中的内容，利用exif获取旋转参数，目前自我总结ios是右1,左3,正6,倒8，这个可以自己测试看看，主要用法如下：
部分读取图片代码
读取图片及获得旋转参数这里不多说了，大致是获取旋转参数后，利用canvas重新生成一张图，得base64路径。不过需要canvas将图摆正，然后得到一个新的base64，获得旋转之后的新图base64。而有时候我们是需要使用这个图片路径的，总不可能用base64，太大，转换以下链接，也就有了下文，这里选择七牛进行转换。
正文
base64转换七牛链接一般流程为：web请求后台接口 ——> 后台返回数据，获取相应的token（上传权限）、key（文件名），urlTpl（文件的模板格式），这些参数建议后台生成 ——> 请求七牛云空间地址，带上后台获取的key，以及添加HTTP请求头（content-type，Authorization身份验证带token），发送需转化的base64 url ——> 获取responseText响应数据（来自七牛云），将传过来的key值带入之前的urlTpl模板，新url完成。代码如下，七牛云文档也可以查看。
putb64: function(token, key, urlTpl, imageBase64) {
var pic = imageBase64.replace(/^.*?,/, '');
var url = location.protocol == 'http:'
? "http://up.qiniu.com/putb64/-1/key/" + key
: "https://up.qbox.me/putb64/-1/key/" + key;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState == 4){
var response = JSON.parse(xhr.responseText);
var result_url = urlTpl.replace('%QiniuUploadImg%', response.key);
console.log(result_url)
$('#show').attr('src', result_url)
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken " + token);
xhr.send(pic);
}
这里有几个注意点：
- key值不要混淆；
最终的url 带的参数key是七牛返回的responseText的key，不是后台传过来的key，这个混淆了要找半天。 - 七牛地址分为http跟https，两个路径是不一样的，需要判断；
- 传过去的需要转换base64，须填写base64之后的字符串 ，除去MIME和base64以及逗号
- UpToken 与后面的字符串保留一个空格 后跟上在服务端请求的token的字符串。
github上有部分代码，可以参考，不过七牛云要加上自己的七牛云地址，暂且先这些吧。
