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

最新推荐文章于 2022-05-24 23:57:10 发布

大爱无疆的疯子

最新推荐文章于 2022-05-24 23:57:10 发布

阅读量652

点赞数 1

分类专栏： PHP html

本文链接：https://blog.csdn.net/m0_38122341/article/details/77774014

版权

PHP 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

前端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处理代码

<?php
	header('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'=>'图片类型不符合'));
    }