标签：function canvas img 记录 前端 base64 bili var 压缩

 //这里处理点击上传事件
    $('#clipbg-btn').click(function () {
        var cas = $('#cropper-img').cropper('getCroppedCanvas');
        var base64 = cas.toDataURL('image/jpeg');
        $("#finalImg").prop("src", base64); // 显示图片
        $(".header-img").addClass('no-bg');
        // var data = encodeURIComponent(base64); //如果需要URI编码，则使用这个
        closecropper()
        $(".header-img img").attr('src', base64)
        $(".header-img img").removeClass('default');
        $(".btn upload").text('上传中···')
        $(".upload").attr('disabled', 'disabled');
        mui.showLoading("正在上传.....","div");
        var bili = 1.5;　　// 压缩比例
        console.log("压缩前base64-length：" + base64.length);
        suofang(base64, bili, addPicture);
    })

    var suofang = function(base64, bili, callback) {
        console.log("执行缩放程序,bili=" + bili);
        //处理缩放，转格式
        var _img = new Image();
        _img.src = base64;
        _img.onload = function() {
            var _canvas = document.createElement("canvas");
            var w = this.width / bili;
            var h = this.height / bili;
            _canvas.setAttribute("width", w);
            _canvas.setAttribute("height", h);
            _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
            var base64 = _canvas.toDataURL("image/jpeg");
            _canvas.toBlob(function(blob) {
                console.log(blob.size);

                if(blob.size > 1024*1024){
                    suofang(base64, bili, callback);
                }else{
                    callback(blob, base64);
                }
            }, "image/jpeg");
        }
    }

    function addPicture(blob,base64) {
        // console.log("base64:  " + base64)
        if (base64.indexOf("image/png") > -1){
            base64 = base64.replace('png', 'jpeg');
        };
         $.ajax({
            type: "post",
            url: "/app/face/updateUserFaceInfo",
            data: {
                "base64": base64
            },
            success: function(r) {
                console.log(JSON.stringify(r))
                $(".upload").removeAttr('disabled');
                mui.hideLoading();
             
                /* 上传后操作的动作放这里 */
            }
        });
    }

标签：function,canvas,img,记录,前端,base64,bili,var,压缩
来源： https://www.cnblogs.com/dayu33/p/16525019.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。