如何在手机端保存canvas导出的base64图片并上传至七牛云存储

[id_9[id_[id_2146763844]050796411]9367638]

前言

做项目时，有时需将 canvas 中的图画导出为图片。我们清楚导出的图片是 base64 字符流图片，且这种编码图片在手机端无法长按保存。那该如何做呢？怎样才能让手机端也能保存这种图片呢？

解决方法：

我们可以先将 base64 编码的图片上传至七牛云存储。接着，通过获取到的返回 url，把它给到 img 标签中。如此一来，就能够实现 base64 移动端的长按保存功能了。

注册七牛云存储账号，并且开通一个云空间。因为上传 base64 编码流图片到七牛时，需要知道原图片（即文件流）的大小，那么该如何计算呢？服务端获取的上传 token 需通过七牛的 AccessKey 和 SecretKey 经后端服务器获取。有大神做好了在线生成 token 的工具，若相信他/她，可使用七牛上传凭证生成器，但 AccessKey 和 SecretKey 最好不要暴露。下面举例说明语言风格保持原文风格，去掉最前面的序号，把长句拆分成多个小分句，分句越短越好：服务端获取上传 token 需经后端服务器用七牛的 AccessKey 和 SecretKey 获取。有在线生成 token 工具，信其可使用七牛上传凭证生成器，不过别暴露 AccessKey 和 SecretKey。下面举例。

    /*picBase是base64图片带头部的完整编码*/
    function putb64(picBase){
            /*picUrl用来存储返回来的url*/
            var picUrl;
            去掉头部的 data:image/png;base64 （注意：base64 后面的逗号也去掉）
            picBase=picBase.substring(22);
            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str)
            {
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }
                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str)
            { 
                var json = eval('(' + str + ')'); 
                return json; 
            } 
            var url = "http://up.qiniu.com/putb64/"+fileSize(picBase); 
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function()
            {
                if (xhr.readyState==4){
                    var keyText=xhr.responseText;
                    /*返回的key是字符串，需要装换成json*/
                    keyText=strToJson(keyText);
                    http://ojvh6i96g.bkt.clouddn.com/ 是我的七牛云空间网址，而 keyText.key 是返回的图片文件名。
                    picUrl=该链接为 "http://ojvh6i96g.bkt.clouddn.com/"+keyText.key;
                    alert(picUrl);
                }
            }
            xhr.open("POST", url, true); 
            xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
            xhr.setRequestHeader("Authorization", UpToken 需填写你的 token （注意前面有 UpToken 且其后有空格）); 
            xhr.send(picBase);
         }