8.JS | base64获图片url的“干(keng)货” (上传七牛)

“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);
    }

这里有几个注意点：

1. key值不要混淆；
   最终的url 带的参数key是七牛返回的responseText的key，不是后台传过来的key，这个混淆了要找半天。
2. 七牛地址分为http跟https，两个路径是不一样的，需要判断；
3. 传过去的需要转换base64，须填写base64之后的字符串 ，除去MIME和base64以及逗号
4. UpToken 与后面的字符串保留一个空格 后跟上在服务端请求的token的字符串。

github上有部分代码，可以参考，不过七牛云要加上自己的七牛云地址，暂且先这些吧。