PHP ob_gzhandler的理解

PHP ob_gzhandler的理解
那么对于我们这些没有开启mod_deflate模块的主机来说,就只能采用ob_gzhandler函数来压缩了,它的压缩效果和mod_deflate相比,相差很小,几乎可以忽略(但它只能对php文件进行压缩)

使用ob_gzhandler函数有3种方法让它对php进行压缩:
1、在php.ini中设置output_handler = ob_gzhandler
2、在.htaccess中加入php_value output_handler ob_gzhandler
3、在php文件头加上ob_start(‘ob_gzhandler’);
第一种我们是没法办到,第二种方法不错,可以一劳永逸,一、二种方法效果都一样,就是对所有php后缀文件进行压缩。我这里主要介绍一下第三种方法,
就是试用CSS压缩法 例如对模板下的style.css进行压缩

1、把模板目录下的style.css复制一份出来,命名为style.css.php

接着在style.css.php顶部加入这句:

复制代码
< ?php if(extension_loaded(‘zlib’)) {ob_start(‘ob_gzhandler’);} header(“Content-type: text/css”); ?>

在最后加上

复制代码
< ?php if(extension_loaded(‘zlib’)) {ob_end_flush();} ?>

(复制的时候去掉?php前的空格)

2、按照下面的方式修改header.php中的css连接

原来的:

复制代码

修改后的:

复制代码

搞定,现在你的CSS就可以被gzip压缩了。

JS也可以使用同样的方法,只是在xx.js.php头部加入的应该是这样:

复制代码
< ?php if ( extension_loaded(‘zlib’) ) {ob_start(‘ob_gzhandler’);} header(“Content-Type: text/java script”); ?>

(复制的时候去掉?php前的空格)

仔细看看K2主题的中的JS,就是修改后缀为php后在顶部加入了ob_gzhandler函数。

所以我们可以用能压缩CSS 和JS的工具来对代码压缩 提高浏览速度~~~

不过ob_gzhandler这个压缩是不建议采取的
使用apache mod_gzip/mod_deflate通过.htaccess文件压缩内容。

javascript异步上传压缩图片并立即显示图片

javascript异步上传压缩图片并立即显示图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
       <script type="text/javascript" src="./js/lrz.mobile.min.js"></script>
       <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body class="upload">
<form id="form">
        <div id="img_show"></div>
        <div id="upload">
           <div id="img_file"><input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file"/><div class="btn">选择图片</div></div> 
        </div>
        <input type="submit" class="tijiao" value="提交">
    </form>
</body>

<script type="text/javascript">
    var img;
    $("input:file").change(function (){
  var path = $(this).val(),
                extStart = path.lastIndexOf('.'),
                ext = path.substring(extStart, path.length).toUpperCase();
           if (ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
                alert("你目前格式是"+ext+",请上传图片限于png,gif,jpg格式");
                return false;
            }
        //console.log(this.files[0]);
         //找个地方加个height就代表强制拉伸 不设置 就是按照640 等比例缩放  宽度和高度不设置就是原图大小
        lrz(this.files[0],{width:640,quality:0.9},function(rst){
            img = rst.base64;
            var html = [];
            var show_img = new Image();
            show_img.src =  rst.base64;
            $("#img_show").html("<div class='upimg'></div>");
            $(".upimg").html(show_img);
        });
    });
    $("#form").submit(function (){
        var phone = $("input[name='phone']").val();
        var month = $("input[name='month']").val();
        $.post("upload.php",{img:img,phone:phone,month:month},function(data){
            img = null;
            alert(data.msg);
        },'json');
        return false;
    });
</script>
</html>

ps:

image/*这个在手机上点击有拍摄+选择图片功能 在pc只有选择图片功能


加了multiple就可以多图上传了
1.首先你要载入JS类库:

<script type="text/javascript" src="./js/lrz.mobile.min.js"></script>

2.然后就是写好form

3.准备处理图片以及图片异步提交的JS。

<script type="text/javascript">
    var img;
    $("input:file").change(function (){

        //console.log(this.files[0]);如果多图上传 就会有多个数组了  到时候需要循环遍历下就行了  不设置就原图尺寸
        lrz(this.files[0],{width:640,quality:0.9},function(rst){ 
            img = rst.base64;
            var html = [];
            var show_img = new Image();
            show_img.src =  rst.base64;
            $("#img_show").html("<div class='upimg'></div>");
            $(".upimg").html(show_img);
        });
    });
    $("#form").submit(function (){
        var phone = $("input[name='phone']").val();
        var month = $("input[name='month']").val();
        $.post("upload.php",{img:img},function(data){
            img = null;
            alert(data.msg);
        },'json');
        return false;
    });
</script>

从代码中可以看出,这个JS库是把图片转成码,然后用变量存起来,然后在用异步POST到服务器中在处理。

看起来貌似没有什么特别的地方,的确实在也没有什么特别的地方…….

后台处理程序PHP:

function error($msg=''){
    $return = array('msg'=>$msg);
    echo json_encode($return);
    exit();
}

function main(){
    if(!$_POST['img']){
        error('请上传图片!');
    }
    
    $img = $_POST['img'];
    
    $path = './upload/';
    
    $type_limit = array('jpg','jpeg','png');

    if(preg_match('/data:\s*image\/(\w+);base64,/iu',$img,$tmp)){
        if(!in_array($tmp[1],$type_limit)){
            error('图片格式不正确,只支持jpg,jpeg,png!');
        }
    }else{
        error('抱歉!上传失败,请重新再试!');
    }
    
    $img = str_replace(' ','+',$img);
    
    $img = str_replace($tmp[0], '', $img);

    $img = base64_decode($img);
   
   $file = $path . rand(1,10000).time() . '.' . $tmp[1];
    if(!file_put_contents($file,$img)){
        error('上传图片失败!');
    }else{
        error('恭喜您!上传成功!');
    }
}
main();

上述代码如果有错误欢迎指出。

如上诉代码,正如你看到的那样,经过BASE64加密过的图片码经过JS异步的POST过来后端后,我们要把代码还原。但是JS库加密的时候会带有一些标签,所以还原前需要处理掉这些本来不属于图片的东西。


    $img = str_replace(' ','+',$img);
    
    $img = str_replace($tmp[0], '', $img);

    $img = base64_decode($img);

最后把代码塞进文件,设置好相应的文件名和扩展名,图片就成功上传到了服务器了。

注意:

前后端包括JS编码要要一致,建议UTF-8

如果图片还原不会来的话,那肯定是数据问题,打印POST过来的图片码出来看看。

代码下载地址
代码下载

PHP Imagick发光文字

PHP Imagick发光文字

$canvas = new Imagick();  
$canvas->newImage(500, 200, 'white');  
$canvas->setImageFormat('png');  
  
$text = new Imagick();  
$text->newImage(500, 200, 'none');  
$text->setImageFormat('png');  
  
$draw = new ImagickDraw();  
$draw->setFillColor(new ImagickPixel('#f00'));  
$draw->setFontSize(50);  
$draw->annotation(100, 60, 'welcome');  
$text->drawImage($draw);  
  
$draw->setFillColor(new ImagickPixel('#fff'));  
$draw->setFontSize(50);   
$draw->annotation(100, 120, 'welcome');  
$text->drawImage($draw);  
  
$shadow_layer = $text->clone();  
$shadow_layer->setImageBackgroundColor(new ImagickPixel('#555'));  
$shadow_layer->shadowImage(80, 0.8, 0, 0);  
$shadow_layer->compositeImage($text, Imagick::COMPOSITE_OVER, 0, 0 );  
$canvas->compositeImage($shadow_layer, imagick::COMPOSITE_DEFAULT, 0, 0);  
   $canvas->writeImage ("test_0.jpg"); //直接写入test_0.jpg文件 
//header("Content-type: image/{$canvas->getImageFormat()}");  
//echo $canvas->getImageBlob();  

ps:
drawImage $text->drawImage($draw); 这个$draw是文字对象 $text可以是图片可以是空白画布
setImageBackgroundColor 设置阴影颜色
shadowImage 第一个参数是透明度0~255 第二个参数就是值越大就是扩散越大 第三和第四就是x和y的阴影位移
compositeImage 这个是合并图片
$shadow_layer->compositeImage($text, Imagick::COMPOSITE_OVER, 0, 0 ); //$text合并到$shadow_layer
$canvas->compositeImage($shadow_layer, imagick::COMPOSITE_DEFAULT, 0, 0); //$shadow_layer 合并到$canvas

PHP扩展插件imagick使用笔记

PHP扩展插件ImageMagick使用笔记

imagick是一个PHP的扩展,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最终调用的是ImageMagick提供的API

ImageMagick是一套软件系列,主要用于图片的创建、编辑以及转换等,详细的解释见ImageMagick的官方网站http://www.imagemagick.org/,ImageMagick与GD的性能要高很多,如果是在处理大量的图片时更加能体现ImageMagick的性能。

1 先安装ImageMagick客户端

wget http://www.imagemagick.org/download/ImageMagick-6.9.7-5.zip
unzip ImageMagick-6.9.7-5.zip
cd ImageMagick-6.9.7-5
./configure --prefix=/opt/ImageMagick --enable-share --enable-static LDFLAGS="-L/usr/lib64" CPPFLAGS="-I/usr/include"
make
make install
ldconfig /usr/local/lib

#下面代码运行之后会多出个png 原来的jpg还是保留的
/opt/ImageMagick/bin/convert /home/1_damacheng.jpg /home/23.png

如果这一步都没有测试成功,那么说明你的配置还有问题,如果错误提示信息是: convert: no decode delegate for this image format ,那么你需要使用 convert -list format 命令查找一下 convert 支持的文件类型,如果不包含 jpeg 格式,那么说明你上面的 jpeg 包没有安装好。


wget http://pecl.php.net/get/imagick-3.4.2.tgz
tar xvf imagick-3.4.2.tgz
cd imagick-3.4.2
/usr/local/php/bin/phpize
#--with-imagick 这个路径ImageMagick安装路径
./configure --with-php-config=/usr/local/php/bin/php-config --with-imagick=/opt/ImageMagick/
make && make install
ldconfig
vi /usr/local/php/etc/php.ini
添加:extension = "imagick.so"

#重启phpfpm

PHP重命名文件夹下的文件后缀名

PHP重命名文件夹下的文件后缀名


    public function zhuanhouzuiming(){

        $lujings='upload/';
        $filesnames = scandir($lujings,1);


        foreach ($filesnames as $k=>$v){
            $xv=$lujings.$v;

            $info = pathinfo($xv);
            //如果mp3要重命名amr
            if($info['extension']=='mp3'){

                $xss=basename($xv,".mp3");
                rename($xv,'upload/'.$xss.'.amr');
            }

        }

    }

linux ffmpeg 源码安装教程

AMR格式是智能手机上的常用音频文件格式,比MP3格式的压缩比大。同样时长的AMR文件大概是MP3的十分之一,所以在移动互联项目中应用比较广泛。但目前AMR格式在个人电脑上应用较少,所以目前大部门播放器都不支持AMR,为了解决这个问题我们打算在服务器端将AMR转成MP3,以便在个人电脑上通过浏览器的方式进行播放。最近公司一款基于移动互联网的产品有个短暂的录音(留言)功能,因为录音需要传输到服务器上,所以为了用户体验及节省用户流量,我们采用了AMR的语音格式。

目前并没有找到合适的支持AMR转MP3的java的开发包,服务器环境为CentOS 6.2,所以我们采用了ffmpeg。
FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件)。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多codec都是从头开发的。其官方网址为:http://www.ffmpeg.org/

实现:
1. 首先安装系统基础环境

# yum install -y automake autoconf libtool gcc gcc-c++  //RHEL & CentOS 系列 # apt-get install automake autoconf libtool gcc gcc-c++  //Debian & Ubuntu 系列

2. 编译所需源码包


yasm:http://yasm.tortall.net/Download.html(汇编器,新版本的ffmpeg增加了汇编代码)  wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
lame:http://lame.sourceforge.net/download.php(Mp3音频解码) wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
OpenCore AMR:http://sourceforge.net/projects/opencore-amr  wget https://ncu.dl.sourceforge.net/project/opencore-amr/opencore-amr/opencore-amr-0.1.4.tar.gz
AmrNB:http://www.penguin.cz/~utx/amr 
AmrWB:http://www.penguin.cz/~utx/amr 
FFMpeg:http://ffmpeg.org/download.html  分别解压缩并编译上述源码包 
# tar xzvf *.tar.gz # tar xjvf *.tar.bz2  解压后直接使用 
# ./configure # make # make install 命令进行编译安装。
 编译FFMpef的时候稍微特殊一点: 
# ./configure --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-version3 --enable-shared # make # make install 
# ldconfig  最后写入config后,终端运行ffmpeg命令,出现success和已安装的扩展,则运行成功。
 

3.使用方法


# ffmpeg -i 1.mp3 -ac 1 -ar 8000 1.amr  //MP3转换AMR 
# ffmpeg -i 1.amr 1.mp3                 //AMR转换MP3

附录:
附录1. ffmpeg默认安装目录为“/usr/local/lib”,有些64位系统下软件目录则为“/usr/lib64”,编译过程中可能会出现

“ffmpeg: error while loading shared libraries: libmp3lame.so.0: cannot open shared object file: No such file or directory”等类似的错误,解决办法是建立软链接:
# ln -s /usr/local/lib/libmp3lame.so.0.0.0 /usr/lib64/libmp3lame.so.0

附录2. 如果出现以下提示:ffmpeg: error while loading shared libraries: libavdevice.so.54: cannot open shared object file: No such file or directory
可以通过如下方式查看ffmpeg的动态链接库哪些没有找到:

vi /etc/ld.so.conf

加入:/usr/local/lib

执行ldconfig
[root@iZ238qupob7Z ffmpeg-3.2.2]# ffmpeg -i 22.amr 22.mp3
ffmpeg version 3.2.2 Copyright (c) 2000-2016 the FFmpeg developers
  built with gcc 4.4.7 (GCC) 20120313 (Red Hat 4.4.7-17)
  configuration: --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-version3 --enable-shared
  libavutil      55. 34.100 / 55. 34.100
  libavcodec     57. 64.101 / 57. 64.101
  libavformat    57. 56.100 / 57. 56.100
  libavdevice    57.  1.100 / 57.  1.100
  libavfilter     6. 65.100 /  6. 65.100
  libswscale      4.  2.100 /  4.  2.100
  libswresample   2.  3.100 /  2.  3.100
[amr @ 0xfde360] Estimating duration from bitrate, this may be inaccurate
Input #0, amr, from '22.amr':
  Duration: 00:00:08.90, bitrate: 5 kb/s
    Stream #0:0: Audio: amr_nb (samr / 0x726D6173), 8000 Hz, mono, flt
Output #0, mp3, to '22.mp3':
  Metadata:
    TSSE            : Lavf57.56.100
    Stream #0:0: Audio: mp3 (libmp3lame), 8000 Hz, mono, fltp
    Metadata:
      encoder         : Lavc57.64.101 libmp3lame
Stream mapping:
  Stream #0:0 -> #0:0 (amr_nb (amrnb) -> mp3 (libmp3lame))
Press [q] to stop, [?] for help
22.amr: Input/output error
size=       9kB time=00:00:08.93 bitrate=   8.4kbits/s speed= 174x    

jquery swipper插件的一些弊端

jquery swipper插件的一些弊端
touch触摸机制是swipper的

阻止click冒泡。拖动Swiper时阻止click事件。下面这个方法或许可以解决触摸机制的问题

<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>

2动画问题 swipper动画影响是全局的 每次操作会影响每个container 所以 动画只能用在1给地方是最稳定的
或者 执行下

$('.ani').css('visibility', 'visible'); 

3 在苹果手机上 无限点击会闪屏 这种情况只能做弹出层 不要写在swiper里面了

ps:swiper3.x 只适用于移动端 pc端兼容性较差ie10以下估计不兼容) 建议用swiper2.x
Animate.css动画库也是

html5点击input没有出现光标完美解决方案

html5点击input没有出现光标完美解决方案

   <input type="text" placeholder="输入姓名" class="inputname" id="id_name">
            <input type="text" placeholder="输入手机" class="inputphone" id="id_phone">

直接自己用jquery 写点击出现光标

   $('.inputname, .inputphone').on('touchstart',function () {
           $(this).focus();
    })

html5滚动页面简单写法

html5滚动页面简单写法
纵向滚动比较简单

直接在外面加个高度 然后overflow-y: auto;

横向比较复杂了
外面写两层
最外面一层写个宽度 overflow-x: auto;
第二层 写width:10000rem 宽度写死 写auto不行 不会自适应里面的宽度

如果点击按钮滚动可以采取如下代码

$('.zhufuyussw').animate({scrollLeft: 1000}, 1000);