ci框架经canvas压缩图片后经base64上传

来源：互联网发布：photoshop mac安装编辑：程序博客网时间：2024/06/05 06:59

前端HTML代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上传图片</title><script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script></head><body><form method="post" enctype='multipart/form-data'><input type="file" id="mypic" name="mypic" accept="image/*"><input type="submit" id="tanchu"></form><script type="text/javascript">$(function(){var input = document.getElementById("mypic"); //$('#mypic').addEventListener('change',readFile,false);//此处不能用id选择器添加事件监听input.addEventListener('change',readFile,false);function readFile(){        var file = this.files[0];        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件           if(!/image\/\w+/.test(file.type)){            alert("请确保文件为图像类型");             return false;         }                var reader = new FileReader();            reader.readAsDataURL(file);            reader.onload = function () {                compressImg(reader.result, function (res) {                    $.post(                    'base64.php',//跳转的url                    {'IMAGE':res},                    function(data){                    //进行返回数据的处理                    },                    'json'                    )                });            };    }    //压缩图片        function compressImg(soureImg, callback) {            self = this;            var after = getByteLen(soureImg) / 1024;            console.log('压缩前==>' + getByteLen(soureImg) / 1024 + 'kb');            console.log('压缩中...');            console.time('用时');            // 参数处理            var baseImg = soureImg;            // 创建img            var oImg = new Image();            oImg.src = baseImg;            // 处理图片大小,宽度大于 1920则压缩大小为一半            var Iwidth;            var Iheight;            oImg.addEventListener('load', function (ev) {                Iwidth = ev.target.width;                Iheight = ev.target.height;                if (Number(Iwidth) > 1920) {                    Iwidth = Iwidth / 2;                    Iheight = Iheight / 2;                }                // 创建canvas                var canvas = document.createElement('canvas');                var cxt = canvas.getContext("2d");                canvas.width = Iwidth;                canvas.height = Iheight;                cxt.drawImage(oImg, 0, 0, Iwidth, Iheight);                var canvasBase64 = canvas.toDataURL("image/jpeg", 0.5);                callback(canvasBase64);                // 垃圾回收                oImg = null;                canvas = null;                console.timeEnd('用时');                console.log('压缩后==>' + getByteLen(canvasBase64) / 1024 + 'kb');                console.log('转换率==>' + getByteLen(canvasBase64) / 1024 / after * 100 + '%');            });         }        function getByteLen(str) {            var l = str.length;            var n = l;            for (var i = 0; i < l; i++) {                if (str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255) {                    n++                }            }            return n        }})</script></body></html>

后台php处理代码

<?phpheader('Content-type:text/html;charset="utf-8"');/*echo '<pre>';print_r($_POST['IMAGE']);exit;*///利用这样的方式也能达到刷选出来数据的目的/*$img = trim($_POST['IMAGE']);    $jpg = explode('/', explode(';', $img)[0])[1];    $start=strpos($img,',');    $img= substr($img,$start+1);*/    $base64_img = trim($_POST['IMAGE']);preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result);$type = $result[2];    if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){    $path = './images';    if(!file_exists($path)){    mkdir($path,0777,true);    }    $file = uniqid();//基于以微秒计的当前时间，生成一个唯一的ID    $fileName = $path .'/'. $file. '.' . $type;    $img = str_replace($result[1], '', $base64_img);    $img = str_replace(' ', '+', $img);//这一步要注意替换，要不然会出现乱码    $data = base64_decode($img);    $success = file_put_contents($fileName, $data);//至此，图片已经上传成功，后续判断根据自己需求来更改    if($success){        $s_config['image_library']  = 'gd2';        $s_config['source_image']   = $path . '/' . $file . '.' .$type;        $s_config['new_image']      = $path . '/s_' . $file . '.' .$type;        $fileName_s = date('Ymd') . '/s_' . $file . '.' .$type;        $s_config['create_thumb']   = true;        $s_config['thumb_marker']   = '';        $s_config['maintain_ratio'] = true;        $s_config['quality']        = 50;        $s_config['width']          = 300;        $s_config['height']         = 200;        $this->load->library('image_lib', $s_config);        $this->image_lib->resize();        echo json_encode(['data' => ['yt' =>$this->config->config['resources_img_url'] . $fileName, 'slt' =>  $this->config->config['resources_img_url'] . $fileName_s]]);    }else{        echo json_encode(array('code'=>101,'msg'=>'上传失败'));    }    }else{    echo json_encode(array('code'=>101,'msg'=>'图片类型不符合'));    }

阅读全文

0 0