天天看點

CI架構學習之七 ( 常用圖像處理 封裝 )

     其實微信手機端上圖時,清單圖最好是縮略圖,節省流量,這不,又被移動坑了一把,話費簽一分就停機,流量欠到90塊才停機,我也是醉了。。。

     不說廢話了,下面是用CI 的内置處理圖像的庫寫的,小弟不才,遺漏之處敬請指出,謝謝。

/**
	 * 生成縮略圖
	 * @param   $path 原圖的本地路徑
	 * @return  null 建立一個 原圖_thumb.擴充名 的檔案
	 *
	 */
	public function dealthumb($path){

		$config['image_library'] = 'gd2';
		$config['source_image'] = $path;
		$config['create_thumb'] = TRUE;
		//生成的縮略圖将在保持縱橫比例 在寬度和高度上接近所設定的width和height
		$config['maintain_ratio'] = TRUE;
		$config['width'] = 80;
		$config['height'] = 80;

		$this->load->library('image_lib', $config);

		$this->image_lib->resize();
		$this->image_lib->clear();

	}

	/*
	 * 處理圖像旋轉
     */
	public function transroate($path,$imgpath){

		$this->load->library('image_lib');
		//(必須)設定圖像庫
        $config['image_library'] = 'gd2';

        $newname = time().'_rote.jpg';
        //設定圖像的目标名/路徑
        $config['new_image'] =$imgpath.$newname;
        //(必須)設定原始圖像的名字/路徑
        $config['source_image'] = $path;
        //決定新圖像的生成是要寫入硬碟還是動态的存在
        $config['dynamic_output'] = FALSE;
        //設定圖像的品質。品質越高,圖像檔案越大
        $config['quality'] = '90%';
        //有5個旋轉選項 逆時針90 180 270 度 vrt 豎向翻轉 hor 橫向翻轉
        $config['rotation_angle'] = 'vrt';

        $this->image_lib->initialize($config);

        if(@$this->image_lib->rotate()){
			$this->image_lib->clear();
			return $config['new_image'];
		}else{
			$this->image_lib->clear();
			return '';
		}
	}

	/**
	 * 處理圖像水印
	 */
	public function overlay($path,$imgpath){

        $this->load->library('image_lib');
        $newname = time().'_over.jpg';
        //設定新圖像名稱
        $config['new_image'] =$imgpath.$newname;
        //調用php gd庫 繪圖
        $config['image_library'] = 'gd2';
        //源圖像 本地位址
		$config['source_image'] = $path;
		//覆寫文字
		$config['wm_text'] = 'Copyright 2015 - Friker';
		//覆寫類型 文字/圖像
		$config['wm_type'] = 'text';
		//文字字型類型
		//$config['wm_font_path'] = 'C:\Windows\Fonts\vrinda.ttf';
		//字型大小
		$config['wm_font_size'] = '16';
		//字型顔色
		$config['wm_font_color'] = 'ff0000';
		//垂直方向距離頂端距離
		$config['wm_vrt_alignment'] = '20';
		//水準方向距離左端距離
		$config['wm_hor_alignment'] = 'center';
		//padding
		$config['wm_padding'] = '20';

		$this->image_lib->initialize($config);

		if($this->image_lib->watermark()){
			$this->image_lib->clear();
			return $config['new_image'];
		}else{
			$this->image_lib->clear();
			return '';
		}
	}

	 /**
      *   處理圖檔上傳
      *   檔案上傳類 通過前台 上傳檔案
      */

	public function uploadfile(){
		//檔案上傳部分
		// 處理檔案
        // $data = '';
		$this->load->helper('url');
		$formpic = key($_FILES);
		//檔案處理部分
        if(false === empty($_FILES[$formpic]['tmp_name'])){
            //設定檔案上傳的路徑
            $upload['upload_path'] = "./public/img/";
            //限制檔案上傳的類型
            $upload['allowed_types'] = 'jpeg|jpg|gif|png';
            //限制檔案上傳的大小
            $upload['max_size'] = 2048;
            //設定檔案上傳的路徑
            $upload['file_name'] = date('YmdHis', time()).rand(10000, 99999);

            //加載檔案上傳配置資訊
            $this->load->library('upload', $upload);
            //處理檔案上傳
            $this->upload->do_upload($formpic);

            //傳回檔案上傳資訊
            $image = $this->upload->data();
            /*
              'file_name' => string '2015071702051718388.jpg' (length=23)
			  'file_type' => string 'image/jpeg' (length=10)
			  'file_path' => string 'E:/wamp/www/testci/public/img/' (length=30)
			  'full_path' => string 'E:/wamp/www/testci/public/img/2015071702051718388.jpg' (length=53)
			  'raw_name' => string '2015071702051718388' (length=19)
			  'orig_name' => string '2015071702051718388.jpg' (length=23)
			  'client_name' => string 'u=415761610,1548338330&fm=116&gp=0.jpg' (length=38)
			  'file_ext' => string '.jpg' (length=4)
			  'file_size' => float 3.74
			  'is_image' => boolean true
			  'image_width' => int 146
			  'image_height' => int 220
			  'image_type' => string 'jpeg' (length=4)
			  'image_size_str' => string 'width="146" height="220"' (length=24)
             */
            //var_dump($image);
            //傳回檔案上傳名字
            $data = $image['file_name'];
            $this->dealthumb($image['full_path']);
            $this->overlay($image['full_path'],$image['file_path']);
            $this->transroate($image['full_path'],$image['file_path']);//

            $thumbdata = '';
            //生成縮略圖名稱
            $pos = strripos($image['file_name'], ".");
            $newname = substr($image['file_name'], 0,$pos)."_thumb".substr($image['file_name'], $pos);
            if(file_exists($image['file_path'].$newname)){
            	$thumbdata = $newname;
            }
        }

        //$dirroot = $_SERVER['DOCUMENT_ROOT'];
        //$this->dealthumb($dirroot."/public/img/".$data);

		//上傳失敗
		if(!$data){
		    echo json_encode(array('status'=>0,'msg'=>"上傳失敗!"));
		}else{
		//上傳成功
	        echo json_encode(array(
    	        'name'=>$data,
    	        'pic'=>base_url()."public/img/".$data,
    	        'picthumb'=>$thumbdata == '' ?$data:$thumbdata
    	        ));
	    }
	}
           

下面是前端的基本html代碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/public/stylesheets/bootstrap.min.css" target="_blank" rel="external nofollow"  />
<link rel="stylesheet" href="/public/stylesheets/bootstrap-responsive.min.css" target="_blank" rel="external nofollow"  />
<link rel="stylesheet" href="/public/stylesheets/matrix-style.css" target="_blank" rel="external nofollow"  />
<link rel="stylesheet" href="/public/stylesheets/matrix-media.css" target="_blank" rel="external nofollow"  />

<script type="text/javascript" src="/public/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery.form.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery.validate.js"></script>

<style type="text/css">
body{background:#eeeeee; margin:0px;}
</style>
</head>

<body>


<div class="control-group">
	<label class="control-label"> 分享logo: </label>
	<div class="controls">
		 <input type="file" name="sharepic" id="sharepic"/>
		 <input type="hidden" name="act_sharepic" value="" id="act_sharepic"/>(<sapn class="fred">最佳大小為 80 X 80 像素</sapn>)
		 <p style="margin:20px 0;"><img src="/public/img/default.png" alt="" id="sharepic_img"></p>
	</div>
</div>


<script type="text/javascript">
$(function () {
	
	/*****************圖檔上傳部分開始 *******************/
	var act = "<form class='myupload' action='"+"<?php echo site_url('mytest/uploadfile');?>"+"' method='post' enctype='multipart/form-data'></form>";

    $("#sharepic").change(function(){
        $(this).wrap(act);
        $(this).parent(".myupload").ajaxSubmit({
            dataType:  'json',
            success: function(data) {
                var src = data.pic;
                //更改預覽圖像位址
                $('#sharepic_img').attr("src",src);
                $('#act_sharepic').val(data.name);
                $('#sharepic').unwrap();
            },
            error:function(xhr){
                alert(JSON.parse(xhr));
            }
        });
    });

})
</script>
</body>
</html>
           

繼續閱讀