大概的流程就是
点击file选择图片
js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64
然后通过ajax或者form把压缩后的base64编码提交到服务器(php)
然后php将base64写入文件
html
<!-- 首先引入jquery!!!!!!这里没有引入 --> <img src="https://www.jb51.net/Uploads/verifyinfo/cardz.png"> <input type="file" accept="image/*" multiple=""> <input type="hidden"> <script> $(function(){ $("input[type=file]").on('change', function(){ var filePath = $(this).val(), //获取到input的value，里面是文件的路径 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(), fileObj = document.getElementById($(this).attr('id')).files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象 var imgBase64str = ''; //存储图片的imgBase64 // 检查是否是图片 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { alert('上传错误,文件格式必须为：png/jpg/jpeg'); return; } var that = this; // 调用函数，对图片进行压缩 compress(fileObj,function(imgBase64){ imgBase64str = imgBase64;//存储转换后的base64编码 var reader = new FileReader(); var img = $(that).prev("img") file = that.files[0] reader.addEventListener("load", function () { img.attr("src",imgBase64str); $("#"+$(that).attr('id')+"base").val(imgBase64str); }, false); reader.readAsDataURL(file) }); }) $("#uploadcard").on("click", function(){ var cardzbase = $("#cardzbase").val(); if (cardzbase.length<=0) { $.toast("请添加正面照"); return; } $.post( "php路径", { cardzbase:cardzbase }, function (data) { alert(data.msg); } ); }); }) // 对图片进行压缩 function compress(fileObj, callback){ if ( typeof (FileReader) === 'undefined') { console.log("当前浏览器内核不支持base64图标压缩"); //调用上传方式不压缩 directTurnIntoBase64(fileObj,callback); } else { var reader = new FileReader(); reader.onload = function (e) { //要先确保图片完整获取到，这是个异步事件 var image = new Image(); image.src=e.target.result; image.onload = function(){ square = 0.2, //定义画布的大小，也就是图片压缩之后的像素 canvas = document.createElement('canvas'), //创建canvas元素 context = canvas.getContext('2d'), imageWidth = Math.round(square*image.width), //压缩图片的大小 imageHeight = Math.round(square*image.height), data = ''; canvas.width = imageWidth; canvas.height = imageHeight; context.clearRect(0, 0, imageWidth, imageHeight); //在给定矩形内清空一个矩形 context.drawImage(this, 0, 0, imageWidth, imageHeight); var data = canvas.toDataURL('image/jpeg',0.6); //压缩完成执行回调 callback(data); }; }; reader.readAsDataURL(fileObj); } } // 不对图片进行压缩，直接转成base64 function directTurnIntoBase64(fileObj,callback){ var r = new FileReader(); // 转成base64 r.onload = function(){ //变成字符串 imgBase64 = r.result; //console.log(imgBase64); callback(imgBase64); } r.readAsDataURL(fileObj); //转成Base64格式 } </script>
php
<?php /** * [将Base64图片转换为本地图片并保存] * @param $base64_image_content [要保存的Base64] * @param $path [要保存的路径] * @return bool|string */ public function base64_image_content($base64_image_content,$path){ //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $type = $result[2]; //生成文件名 $file_name = random_str(10).".{$type}"; //路径和文件名拼接 $local_file_url = $path.$file_name; if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], '', $base64_image_content)))){ return array("filename"=>$file_name,"path"=>$path,"filepath"=>$local_file_url); }else{ return false; } }else{ return false; } } public function uploadm() { $da['status'] = 0; if (IS_POST) { $infoz = I("post.cardzbase"); if (!$infoz || !$infof) { // 上传错误提示错误信息 // $this->error($upload->getError()); $da['msg'] = "上传异常"; } else { $infoz_info = $this->base64_image_content($infoz,"Uploads/verifyinfo/"); if($infof_info==false){ $da['msg'] = "上传失败"; }else{ //自己的业务... } } }else{ $da['msg'] = "非法请求"; } $this->ajaxReturn($da); }