七牛云上传--官方JSDK与photoClip截图Base64编码

主要
1、php后台生成七牛云uploadtoken
2、前端使用官方JSDK上传原图
3、photoClip截图 生成Base64图片
4、上传base64 编码图片到七牛云

php后台生成uploadtoken

下载php的SDK，然后引用SDK中的Auth即可：
七牛云官方php的SDK

use Think\Controller;use Qiniu\Auth;use Qiniu\Storage\UploadManager;use Org\Net\Http;class QiniuLogic extends Controller{    public function get_token(){        $accessKey = C("QINIU_ACCESS"); //这个是七牛云账号的access        $secretKey = C("QINIU_SECRET"); //这个是七牛云账号的secret        $bucket = C("QINIU_BUCKET");    //这个是七牛云的内容空间        vendor("Qiniu/autoload");        $auth = new Auth($accessKey, $secretKey);        $policy = array(            "scope"=>$bucket.":".$accessKey,            "insertOnly"=>0        );        $uptoken = $auth->uploadToken($bucket, null, 36000, $policy);        $this->assign("QiniuToken",$uptoken);           //我们要的token，必需        $this->assign("QiniuDomain",C("QINIU_DOMAIN")); //这个是cname后的域名，非必须    }}

前端页面使用官方JSDK上传原图

首先，下载一个官方的JSDK
然后在html页面中引用js，官方文档中引用的比较多，这里引用两个：plupload.full.min.js和qiniu.min.js就够用了。
上传过程中可能出现地域的问题：
常见问题处理

html页面

    <div>        <img id="image" src='{$gradeImg}' />        <input type="hidden" id="qiniu-uptoken" value="{$QiniuToken}">        <input type="hidden" id="qiniu-domain" value="{$QiniuDomain}">        <input type="hidden" id="image_original" value="{$gradeImg}">    </div>    <!--七牛云直接上传，这里可以参考官方的文档-->    <div id="qiniu-upload-container" style="display: none;">        <button id="qiniu-upload-btn" class="btn btn-success">            上传        </button>        <div id="fsUploadProgress">        </div>    </div>    <!--七牛云直接上传end-->    <!--七牛云图直接上传,upload.js 是自己需要写的，其它两个是SDK文件的--><script src="../qiniu/plupload/plupload.full.min.js"></script><script src="../qiniu/dist/qiniu.min.js"></script><script src="../qiniu/js/upload.js"></script><!--七牛云图直接上传end-->

JavaScript-upload.js

官方文档中有很多内容，这里做了一些简化：
主要修改‘FileUploaded’，‘key’和 randStr() 方法

$(function () {    var uploader = Qiniu.uploader({        runtimes: 'html5,flash,html4',        browse_button: 'qiniu-upload-btn',        container: 'qiniu-upload-container',        drop_element: '',        max_file_size: '10mb',        flash_swf_url: 'bower_components/plupload/js/Moxie.swf',        dragdrop: false,        chunk_size: '2mb',        multi_selection: !(mOxie.Env.OS.toLowerCase()==="ios"),        uptoken: $('#qiniu-uptoken').val(),        domain: $('#qiniu-domain').val(),        get_new_uptoken: false,        auto_start: true,        log_level: 5,        init: {            'FilesAdded': function(up, files) {                $("#qiniu-upload-btn").html("正在上传中...");                $("#qiniu-upload-btn").attr("disabled",true);            },            'FileUploaded': function(up, file, info) { //主要是这个方法                var res = $.parseJSON(info);                var image = $("#qiniu-domain").val()+res.key;                $("#image_original").val(image);                var thumb = image+"?imageView2/2/w/500/h/300";                $("#image").attr("src",thumb);                $("#qiniu-upload-btn").html("重新上传");                $("#qiniu-upload-btn").attr("disabled",false);            },            'UploadProgress': function(up, file) {            },            'Error': function(up, err, errTip) {                $("#qiniu-upload-btn").html("重新上传");                $("#qiniu-upload-btn").attr("disabled",false);                alert("上传失败！请重试！");            }            ,            'Key': function(up, file) {//在这里可以改变文件的名称和路径                var key = "public/";                var now = new Date();                key += now.getFullYear().toString()+(now.getMonth()+1).toString()+"/"+now.getDate()+"/"+now.getHours()+"/";                key += randStr()+".png";                return key            }        }    });    uploader.bind('FileUploaded', function() {        console.log('hello man,a file is uploaded');    });});function randStr() {//这个是为了生成随机字符串用的    var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";    var n = 10, s = "";    for(var i = 0; i < n; i++){        var rand = Math.floor(Math.random() * str.length);        s += str.charAt(rand);    }    return s;}

photoClip截图 生成Base64图片

首先下载jQueryphotoClip插件
然后引入js文件,编写html布局
最后js实现
注：js代码中涉及到一个弹窗插件layer，很简单，引用一个js就行了。

html页面

    <style>        .load_mask{    position: absolute;  width: 100%;  height: 100%;  text-align: center;  padding-top: 30%;background-color: #fffeff;z-index: 100;opacity: 0.9;display: none;}        #loadText{margin-top: 20px;font-size: 20px;}        #img_show{position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: #0c0c0c;z-index: 100;display: none;}        #img_show .sn-operation-content{position: absolute;z-index: 99;text-align: center;width: 100%;bottom:10%;}        #img_show .btn{margin: 0 10px;}        .shunshizhen{    width: 30px;  height: 30px;  position: absolute;  z-index: 99;  color: #ffffff;  line-height: 30px;  font-size: 30px;  left: 48%;  top: 10%;}    </style>    <div class="load_mask">        <img src="../images/icon/loading.gif" alt="" class="t_loadImg">        <div id="loadText">图片剪裁中...</div>    </div>    <div id="img_show">        <div class="sn-operation-content">            <a class="sn-photoclip-cancel btn btn-white">取消</a>            <a class="sn-photoclip-ok btn btn-danger">选取</a>        </div>        <i class="icon-repeat shunshizhen"></i>    </div>    <div>        <img id="image" src='{$gradeImg}' />        <input type="hidden" id="qiniu-uptoken" value="{$QiniuToken}">        <input type="hidden" id="qiniu-domain" value="{$QiniuDomain}">        <input type="hidden" id="image_original" value="{$gradeImg}">    </div>    <!--截图上传-->    <div id="mm-photoclip">        <input type="file" id="file" accept="image/*" />        <label for="file" class="btn btn-success">上传</label>    </div>    <!--截图上传end--><script src="../common/layer/layer.min.js"></script><script src="../photoclip/iscroll-zoom.js"></script><script src="../photoclip/hammer.js"></script><script src="../photoclip/lrz.all.bundle.js"></script><script src="../photoclip/jquery.photoClip.js"></script><!--base64.js 和 upload_image.js 自己写--><script src="../base64.js"></script><script src="../upload_image.js"></script>

upload_image.js

代码中有很详细的注释，就不解释了
注：1、clipArea.shunshizhen();这个是图片顺时针的效果方法，要自己去改jquery.photoClip.js 文件。因为这个不在文章的内容范围，就不解释了。
2、photoClip插件有个兼容性的问题，还是得自己去改。
3、putb64（）这是一个上传base64图片到七牛云的方法，后面会讲。

var file_name;$(function () {    var obj;    var clipArea = new bjj.PhotoClip("#img_show", {        size: [200, 272], // 截取框的宽和高组成的数组。默认值为[260,260]        adaptive: null, // 截取框自适应，截取框宽和高的百分比组成的数组。默认为 null。如果设置了该参数，且值有效，则会忽略 size 的大小设置，size 中的值仅用于计算宽高比。当设置了其中一个值得百分比时，如果另一个未设置，则将会按 size 中的比例等比缩放。        outputSize: [200,272], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小        outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"        outputQuality: .8, // 输出质量，取值 0 - 1，默认为0.8。（这个质量不是最终输出的质量，与 lrzOption.quality 是相乘关系）        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象        source: "", // 需要裁剪图片的url地址。该参数表示当前立即开始裁剪的图片，不需要使用 file 控件获取。注意，该参数不支持跨域图片。        view: "", // 显示截取后图像的容器的选择器或者DOM对象        ok: ".sn-photoclip-ok", // 确认截图按钮的选择器或者DOM对象        loadStart: function(file) {            obj = this;            file_name = file.name;            $(".load_mask").show();            $("#loadText").html("图片读取中...");        }, // 开始加载的回调函数。this指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入（如果是使用 source 加载图片，则该参数为图片的 img 对象）        loadComplete: function(img) {            $("#img_show").fadeIn(250);            $(".load_mask").hide();            $("#loadText").html("图片裁剪中...");            $(".shunshizhen").unbind('click').bind("click",function(){                clipArea.shunshizhen();            });        }, // 加载完成的回调函数。this指向当前 PhotoClip 的实例对象，并将图片的 img 对象作为参数传入        loadError: function(event) {            show_error("截图插件出错");        }, // 加载失败的回调函数。this指向当前 PhotoClip 的实例对象，并将错误事件的 event 对象作为参数传入        clipFinish: function(dataURL) {            // layerIndex1= layer.open({            //     type: 2            //     ,content: '图片剪裁中'            // });            if(!navigator.onLine){                layer.alert("网络不好,请检查网络再上传哟~");                $("#img_show").fadeOut(250);                return false;            }            $(".load_mask").show();            putb64(dataURL);   //上传base64图片到七牛云            $("#img_show").fadeOut(250);        }, // 裁剪完成的回调函数。this指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入        lrzOption: { // lrz压缩插件的配置参数            width:500, // 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。            height: 500, // 图片最大不超过的高度，默认为原图高度，宽度不设时会适应高度。            quality: 1 // 图片压缩质量，取值 0 - 1，默认为0.7。（这个质量不是最终输出的质量，与 outputQuality 是相乘关系）        }    });    $(".sn-photoclip-cancel").click(function() {        $("#img_show").fadeOut(250);    });})

上传base64 编码图片到七牛云

官方有相应的说明：如何上传base64编码图片到七牛云
因为我这里有个需求：修改KEY值，就是改变上传文件在七牛上的名字。
这里说得很清楚，可以不用管uptoken.SaveKey , 直接在url后面加个字段并且字段要base64加密

base64.js

js给字符串进行base64编译的。网上一搜一大把：

function str2Base64(str) {    var b = new Base64();    return b.encode(str);}function Base64() {    // private property    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";    // public method for encoding    this.encode = function (input) {        var output = "";        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;        var i = 0;        input = _utf8_encode(input);        while (i < input.length) {            chr1 = input.charCodeAt(i++);            chr2 = input.charCodeAt(i++);            chr3 = input.charCodeAt(i++);            enc1 = chr1 >> 2;            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);            enc4 = chr3 & 63;            if (isNaN(chr2)) {                enc3 = enc4 = 64;            } else if (isNaN(chr3)) {                enc4 = 64;            }            output = output +                _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +                _keyStr.charAt(enc3) + _keyStr.charAt(enc4);        }        return output;    }    // public method for decoding    this.decode = function (input) {        var output = "";        var chr1, chr2, chr3;        var enc1, enc2, enc3, enc4;        var i = 0;        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");        while (i < input.length) {            enc1 = _keyStr.indexOf(input.charAt(i++));            enc2 = _keyStr.indexOf(input.charAt(i++));            enc3 = _keyStr.indexOf(input.charAt(i++));            enc4 = _keyStr.indexOf(input.charAt(i++));            chr1 = (enc1 << 2) | (enc2 >> 4);            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);            chr3 = ((enc3 & 3) << 6) | enc4;            output = output + String.fromCharCode(chr1);            if (enc3 != 64) {                output = output + String.fromCharCode(chr2);            }            if (enc4 != 64) {                output = output + String.fromCharCode(chr3);            }        }        output = _utf8_decode(output);        return output;    }    // private method for UTF-8 encoding    _utf8_encode = function (string) {        string = string.replace(/\r\n/g,"\n");        var utftext = "";        for (var n = 0; n < string.length; n++) {            var c = string.charCodeAt(n);            if (c < 128) {                utftext += String.fromCharCode(c);            } else if((c > 127) && (c < 2048)) {                utftext += String.fromCharCode((c >> 6) | 192);                utftext += String.fromCharCode((c & 63) | 128);            } else {                utftext += String.fromCharCode((c >> 12) | 224);                utftext += String.fromCharCode(((c >> 6) & 63) | 128);                utftext += String.fromCharCode((c & 63) | 128);            }        }        return utftext;    }    // private method for UTF-8 decoding    _utf8_decode = function (utftext) {        var string = "";        var i = 0;        var c = c1 = c2 = 0;        while ( i < utftext.length ) {            c = utftext.charCodeAt(i);            if (c < 128) {                string += String.fromCharCode(c);                i++;            } else if((c > 191) && (c < 224)) {                c2 = utftext.charCodeAt(i+1);                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));                i += 2;            } else {                c2 = utftext.charCodeAt(i+1);                c3 = utftext.charCodeAt(i+2);                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));                i += 3;            }        }        return string;    }}

put64（） 上传base64图片到七牛云

和官方提供的一样，只是修改了一下key值
方法randStr（） 用于生成随机的字符串

function putb64(base){    if(!navigator.onLine){        layer.alert("网络不好,请检查网络再上传哟~");        $(".load_mask").hide();        return false;    }    var token = $("#qiniu-uptoken").val();    var bases = base.split(";base64,");    var pic = bases[1];    var url = "http://upload.qiniu.com/putb64/-1"; //非华东空间需要根据注意事项 1 修改上传域名    var xhr = new XMLHttpRequest();    xhr.onreadystatechange=function(){        if (xhr.readyState==4){            var result = eval('(' + xhr.responseText + ')');            var key = result.key;            $(".load_mask").hide();            var image = $("#qiniu-domain").val()+key;            $("#image_original").val(image);            $("#image").attr("src",image);            // success_upload(key,[]);        }    };    var mm_key = "public/"+randStr()+".png";    mm_key = str2Base64(mm_key);      //base64编译    mm_key = mm_key.replace("+","-");     mm_key = mm_key.replace("/","_");    url += "/key/"+mm_key;    xhr.open("POST", url, true);    xhr.setRequestHeader("Content-Type", "application/octet-stream");    xhr.setRequestHeader("Authorization", "UpToken " + token);    xhr.send(pic);}function randStr() {    var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";    var n = 10, s = "";    for(var i = 0; i < n; i++){        var rand = Math.floor(Math.random() * str.length);        s += str.charAt(rand);    }    return s;}