图片base64传输保存到七牛

Question

基于html5的一个web项目，目前想实现客户端的图片压缩上传,前端技术只局限于js和html5.

通过html5的canvas处理调用其toDataURL获取到了缩放后图片的base64编码。当然，如果自己写服务端来保存图片是没有任何问题的。现在的问题是如何将编码过后的图片信息上传到七牛来保存为jpg格式的图片(为了兼容其他平台，必须转换为jpg后保存，不能直接保存base64信息)？
目前想到的方法只有自己写个图片服务来做个中转，但是感觉比较繁琐。
基于web浏览器，请问除去flash客户端压缩，是否还有其他的方式来实现客户端图片的压缩。

Answer 1

请通过工单与我们联系，我把详细的步骤发给您。

Answer 2

function fileCompressToImg(source_file_obj,max_size,callback){
    var quality=1;
    if(source_file_obj.size>max_size){
        quality=(max_size/source_file_obj.size).toFixed(1);
    }

    var reader=new FileReader();
    reader.onload=function(e){
        var imgObj=new Image();
        imgObj.src= e.target.result;
        imgObj.onload=function(){
            var cvs=document.createElement('canvas');
            cvs.width = imgObj.naturalWidth;
            cvs.height = imgObj.naturalHeight;
            var ctx=cvs.getContext('2d').drawImage(imgObj,0,0);
            console.log('image quality is'+quality);
            var newImageData = cvs.toDataURL('image/jpeg', quality);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            callback(result_image_obj);
        }
    };
    reader.readAsDataURL(source_file_obj);
}

function fileCompressToBlob(source_file_obj,max_size,callback){
    var quality=1;
    if(source_file_obj.size>max_size){
        quality=(max_size/source_file_obj.size).toFixed(1);
    }

    var reader=new FileReader();
    reader.onload=function(e){
        var imgObj=new Image();
        imgObj.src=e.target.result;
        imgObj.onload=function(){
            var cvs=document.createElement('canvas');
            cvs.width = imgObj.naturalWidth;
            cvs.height = imgObj.naturalHeight;
            console.log('blob quality is'+quality);
            var ctx=cvs.getContext('2d').drawImage(imgObj,0,0);
            cvs.toBlob(function(blob){
                callback(blob);
            },'image/jpeg',quality);
        };
    };
    reader.readAsDataURL(source_file_obj);
};