JS圖片壓縮base64php上傳

圖片上傳時用js壓縮

var eleFile20 = document.querySelector('input[name="upload20-img"]');
            eleFile20.addEventListener('change',function(){

                var file = this.files[0];
                // 確認選擇的文件是圖片
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();

                    var file1 = $('input[name="upload20-img"]')[0].files[0];//獲取input file控件選擇的文件
                    //壓縮方法
                    ImgToBase64(file1, 500,function(base64){
                        $('#ckBase').val(base64);
                        $.ajax({
                            url:"<{:U(saveCkzm)}>",
                            data:{base64:$('#ckBase').val(),id:$('#datum_id').val()},
                            type:"post",
                            dataType:"json",
                            success:function(data){
                                if(data.status==1){
									//上傳成功後拼接預覽圖 將base64丟入img的src
                                    var html='<div class="prependDIv">';
                                    html += '<a class="fa fa-close closeIcon" data-id='+data.info.photoid+'></a>';
                                    html += '<img src="'+base64+'" class="prependImg" />';

                                    html += '</div>';
                                    $('#ckPhoto').prepend(html);
                                }else{
                                    layer_tip(data.info.msg);
                                }
                            }
                        });

                    });

                }
            });

壓縮方法如下

            function ImgToBase64(file, maxLen,callBack) {

                var base64='';
                var img = new Image();
                // var url = getObjectURL(file);
                var reader = new FileReader();//讀取客戶端上的文件
                reader.onload = function () {
                    var url = reader.result;//讀取到的文件內容.這個屬性只在讀取操作完成之後纔有效,並且數據的格式取決於讀取操作是由哪個方法發起的.所以必須使用reader.onload，
                    img.src = url;//reader讀取的文件內容是base64,利用這個url就能實現上傳前預覽圖片
                    // img.src=url;
                };
                img.onload = function () {
                    //生成比例
                    var width = img.width, height = img.height;
                    //計算縮放比例
                    var rate = 1;
                    if (width >= height) {
                        if (width > maxLen) {
                            rate = maxLen / width;
                        }
                    } else {
                        if (height > maxLen) {
                            rate = maxLen / height;
                        }
                    };
                    img.width = width * rate;
                    img.height = height * rate;
                    //生成canvas
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    base64 = canvas.toDataURL('image/jpeg', 0.9);
                    callBack(base64);
                };
                reader.readAsDataURL(file);

            }

php圖片上傳代碼
對base64的操作

$base64=I('base64');
        $datumId=I('id');
        if(!empty($base64)){
            $result=[];
            if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)){
                $type = $result[2];
                $new_file = "Uploads/user/".date('Ymd',time())."/";
                if(!file_exists($new_file))
                {
                    //檢查是否有該文件夾，如果沒有就創建，並給予最高權限
                    mkdir($new_file, 0700);
                }
                $str=$this->random(5);
                $new_files = $new_file.date('Ymdhis',time()).$str.".{$type}";
				
				//base64轉文件成功後進入數據庫操作
                if (file_put_contents($new_files, base64_decode(str_replace($result[1], '', $base64)))){

					//操作數據庫
                    $path="/".$new_files;
                    $data['url']=$path;
                    M('dbname')->add($data);
                    $newid=M()->getLastInsID();

                    $returnData['msg']='上傳成功';
                    $returnData['photoid']=$newid;
                    $this->success($returnData);
                }
            }
        }else{
            $returnData['msg']='請刷新後重試';
            $this->error($returnData);
        }