图片叠加并增加文字DEMO

<?php
/**
 * 图片叠加并增加文字demo
 * @author caozhong
 * @version 2016-11-03
 */
$dst_path 'bg.jpg';//底图
$src_path '2.jpg';//合成图片
$dst = imagecreatefromstring(file_get_contents($dst_path));
$src = imagecreatefromstring(file_get_contents($src_path));
list($src_w$src_h) = getimagesize($src_path);
imagecopymerge($dst$src, 120, 120, 0, 0, $src_w$src_h, 50);
/*imagecreatefromstring()--从字符串中的图像流新建一个图像,返回一个图像标示符,其表达了从给定字符串得来的图像
图像格式将自动监测,只要php支持jpeg,png,gif,wbmp,gd2.*/
$font 'heiti.ttf';
$black = imagecolorallocate($dst, 0, 0, 0);
//增加文字,如果多条,请增加多条
imagefttext($dst, 14, 0, 330, 125, $black$font'姓名:白猫');
imagefttext($dst, 14, 0, 330, 155, $black$font'性别:雄');
/*imagefttext($img,$size,$angle,$x,$y,$color,$fontfile,$text)
$img由图像创建函数返回的图像资源
size要使用的水印的字体大小
angle(角度)文字的倾斜角度,如果是0度代表文字从左往右,如果是90度代表从上往下
x,y水印文字的第一个文字的起始位置
color是水印文字的颜色
fontfile,你希望使用truetype字体的路径*/
list($dst_w,$dst_h,$dst_type) = getimagesize($dst_path);
/*list(mixed $varname[,mixed $......])--把数组中的值赋给一些变量
像array()一样,这不是真正的函数,而是语言结构,List()用一步操作给一组变量进行赋值*/
/*getimagesize()能获取到什么信息?
getimagesize函数会返回图像的所有信息,包括大小,类型等等*/
//header("Content-Disposition: attachment; filename='1.jpg'");
switch($dst_type){
    case 1://GIF
        header("content-type:image/gif");
        imagegif($dst);
        break;
    case 2://JPG
        header("content-type:image/jpeg");
        imagejpeg($dst);
        break;
    case 3://PNG
        header("content-type:image/png");
        imagepng($dst);
        break;
    default:
        break;
}
imagedestroy($dst);

HTML Diff,php版本,文本对比(标记出两个HTML的差异)

其实就是一个 文本对比代码,但是不会将HTML标签对比出。类似于Beyond compare、Ultra compare

原代码是C#,其实C#也是别人修改的Python。
觉得效果挺好,就修改为了PHP, 且支持汉字或其它字符(原来代码中,汉字会被无情的一个接着一个拆分)

效果可以参见「知乎网」或下图, 红色部分为已删除文字, 绿色部分代表新添文字

C#:http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
Ruby:https://github.com/myobie/htmldiff
Python:https://github.com/aaronsw/htmldiff

使用本代码必须遵循GPL协议,如果您用于商业用途,虽然我不能将您怎样,但是您会打击我的积极性,以后还有没有这么好的代码,就难说了。(不要觉得我脸皮厚,已经有很多人找我要过,只是因为他们用于商业用途,我没给)
我修改回来也不容易,也花了一天时间, 并且为汉字等做了大量的调试,退一万步来说,原作者发布该代码也是遵循协议。您拿过去就可以用,却用在赚钱上,您有钱不妨招聘一个员工替您去写……

新加了Javascript代码部分,作者是楼下评论的那位,但是我修改了一些BUG(Ps:我通读代码之后,修改了一些错误,作者你仍然需要加强Javascript方面的能力)

26153920_yQTo.png

资源下载:

html_diff.class

js

html5文件上传断点续传

感谢以下文章提供的思考方向:
http://www.script-tutorials.com/pure-html5-file-upload/
http://fex.baidu.com/blog/2014/04/html5-uploader/

HTML:

upload html5            Please select file                        清除                    
                                                                    
                            剩余时间 | 00:00:00                100k/s

CSS:

style.css

/*************reset****************/html{color:#333;-webkit-text-size-adjust:none;height:100%;max-height:100%;overflow: hidden;font-family: 'Microsoft Yahei';}body{height: 100%;max-height:100%;overflow: hidden;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font-size:12px;}a{color: #333333;text-decoration: none;}a:hover{text-decoration:underline; color:#c00;}/*font*/*{    font-size: 1.05em;    color: #222;    font-family: "Microsoft Yahei";}

upload.css

#upload_box{    padding:0em 1em;    padding-top:20px;    height:100%;    background: #74b1d1;    position: relative;}#upload_form{    background: #fff;    height: 80%;    padding: 1.4em 1em;    border-radius: 4px;    box-shadow: 0 1px 3px rgba(0,0,0,0.7);}#upload_form label{    font-size: 1.5em;    font-weight: bolder;}#file{    margin:20px 0;    border:1px solid #ccc;    border-radius: 5px;    padding: 0.5em;    font-size: 1.4em;    width: 90%;}#submit,#clear{    font-size:1.2em;    padding:0.3em 1.2em;    border-radius:10px;    border:1px solid #d9d9d9;    background: -webkit-linear-gradient(#ffffff,#dfdfdf);    background: -o-linear-gradient(#ffffff,#dfdfdf);    background: -moz-linear-gradient(#ffffff,#dfdfdf);    background: linear-gradient(#ffffff,#dfdfdf);    box-shadow:0px 1px 3px rgba(0,0,0,0.7);    outline: none;}#submit{    margin-right:1.6em;}#submit:hover,#clear:hover{    background: -webkit-linear-gradient(#66ccff,#74b1d1);    background: -o-linear-gradient(#66ccff,#74b1d1);    background: -moz-linear-gradient(#66ccff,#74b1d1);    background: linear-gradient(#66ccff,#74b1d1);    cursor: pointer;}.upload_message_show{    margin-top: 20px;    display: none;}.upload_file_message{    padding: 1.4em 0em;    padding-left: 60%;    padding-right: 1.2em;    border-radius: 10px;    background: -webkit-linear-gradient(#dfdfdf,#cccccc);    background: -o-linear-gradient(#dfdfdf,#cccccc);    background: -moz-linear-gradient(#dfdfdf,#cccccc);    background: linear-gradient(#dfdfdf,#cccccc);    font-size: 1.1em;    font-weight: bolder;    position: relative;    min-height: 6.5em;}.upload_file_error{    color:red;}.message_box{    position: absolute;    left: 1.2em;    top: 1.4em;}.upload_file_preview{    height: 100%;    position: relative;}.upload_bar_box{    width: 100%;    height: 1em;    border-radius:0.5em;    position: relative;    box-shadow:0px 0px 3px rgba(0,0,0,0.6);    line-height: 1em;}.upload_bar{    width:0%;    border-radius:0.5em;    background:-webkit-linear-gradient(#F01731,#F50B43);    background:-o-linear-gradient(#F01731,#F50B43);    background:-moz-linear-gradient(#F01731,#F50B43);    background:linear-gradient(#F01731,#F50B43);    height:100%;}.upload_percent{    position: absolute;    right: 10px;    top:0em;    font-weight:700;}.upload_count{    width: 100%;    font-size:0.8em;    margin-top:1em;    position: relative;}.left_time{    margin-left: 1em;}.speed{    position: absolute;    right:1em;    top: 0em;}

js:

变量定义:

var nSlice_count = 100,//分段数,文件分段数
    nFactCount,           //实际分段数
    nMin_size      = 0.5,//最小分段大小(M)
    nMax_size     = 5,  //最大分段大小(M)
    nFactSize,           //实际分段大小
    nCountNum     = 0,  //分段标号
    sFile_type,           //文件类型
    nFile_load_size,   //文件上传部分大小
    nFile_size,           //文件大小
    nPreuploaded = 0,  //上一次记录上传部分的大小
    bIs_uploading= false,//是否上传中
    bStart_upload= false,//是否开始上传
    bEnd_upload  = false;//是否上传完成

当文件域变化或者点击清空时,重置所有已记录信息:

function messageChange(){    document.querySelector(".upload_file_name").innerHTML ="文件名称: " ;    document.querySelector(".upload_file_type").innerHTML ="文件类型: " ;    document.querySelector(".upload_file_size").innerHTML ="文件大小: " ;    document.querySelector(".isCompleted").innerHTML       ="上传状态: " ;    document.querySelector(".upload_bar").style.width = "0%";    document.querySelector(".upload_percent").innerHTML = "0%";    document.querySelector(".upload_file_preview").innerHTML ="";    document.querySelector(".upload_message_show").style.display = "none";
}function clearUploadFile(e){    var e = e || event;
    e.stopPropagation();
    e.preventDefault();    document.getElementById("file").value = "";
    bStart_upload = false;
    messageChange();
}function fileReady(){
    bIs_uploading = false;
    bEnd_upload = false;
    nCountNum = 0;
    bStart_upload = false;
    messageChange();
}

发生错误时的处理:

function errorUp(){
    bStart_upload = false;    document.querySelector(".upload_file_error").innerHTML = "上传过程中出错";
}function abortUp(){
    bStart_upload = false;    document.querySelector(".upload_file_error").innerHTML = "网络故障,请检查重试";
}

文件上传后提供预览,考虑到手机小屏幕的问题,只在ipad和pc上提供预览,预览的文件类型为image/video/audio,由于浏览器对多媒体格式的支持不同,不能保证每个文件都能正常播放

function filePreview($src){    var ftype = sFile_type;    var $temp;    var IMGMaxHeight = document.querySelector(".upload_message_show").offsetHeight;    switch(ftype){        case "image" :        $temp = '';        break;        case "audio" :        $temp = '';        break;        case "video" :        $temp = '';        break;
    }    var IsPreview = checkUserAgent();    if(IsPreview)
    document.querySelector(".upload_file_preview").innerHTML = $temp;
}function checkUserAgent(){    var msg = true;    var agent = ["ipod","iphone","android","symbian","windows mobile"];    var info =navigator.userAgent.toLowerCase();    
    for(var i=0,j=agent.length;i0)
        msg = false;
    }    return msg;
}

数据单位转化:

var conversion = (function(){        var unitConversion = {
            bytesTosize:function(data){                var unit = ["Bytes","KB","MB","GB"];                var i = parseInt(Math.log(data)/Math.log(1024));                return (data/Math.pow(1024,i)).toFixed(1) + " " + unit[i];
            },
            secondsTotime:function(sec){                var h = Math.floor(sec/3600),
                    m = Math.floor((sec-h*3600)/60),
                    s = Math.floor(sec-h*3600-m*60);                if(h<10) h = "0" + h;                if(m<10) m = "0" + m;                if(s<10) s = "0" + s;                return h + ":" + m + ":" + s + ":";
            }
        };        return unitConversion;
    })();

文件上传和上传时的计算:

//start sending
    var reader = new FileReader();    var timer;    var fProgress = function(e){        var fSize = get_file_message.getAll().fileSize;
        timer = setTimeout(uploadCount(e,fSize,conversion),300);
    };    var floadend = function(e){        if(reader.error){alert("上传失败,出现未知错误");clearTimeout(timer);return;}
        clearTimeout(timer);        if(nCountNum+1!=nFactCount)
        {            if(bStart_upload)
            {
                nCountNum++;
                uploadStart();                return;
            } else {                document.querySelector(".speed").innerHTML = "0k/s";                document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";                return;
            }        
        }

        bEnd_upload = true;        document.querySelector(".layer_box").style.display = "none";        document.querySelector(".speed").innerHTML = "0k/s";        document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";        document.querySelector(".upload_percent").innerHTML = "100.00%";        document.getElementById("submit").value = "上传";        
        var $res = JSON.parse(e.target.responseText);
        filePreview($res);        if($res.res=="success") bIs_uploading =true;        document.querySelector(".isCompleted").innerHTML="上传状态: " + (bIs_uploading?"上传完成":"正在上传..");
    };    var uploadStart = function(){        var get_all = get_file_message.getAll();        var start = nCountNum * nFactSize,
            end   = Math.min(start+nFactSize,get_all.fileSize);        var fData = new FormData();

        fData.append("file",file.slice(start,end));
        fData.append("name",file.name);
        fData.append("size",file.size);
        fData.append("type",file.type);
        fData.append("totalCount",nFactCount);
        fData.append("indexCount",nCountNum);
        fData.append("trueName",file.name.substring(0,file.name.lastIndexOf(".")));        
        document.querySelector(".layer_box").style.display = "block";        if(!sFile_type)
        sFile_type = file.type.substring(0,file.type.indexOf("/"));        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress",fProgress,false);
        xhr.addEventListener("load",floadend,false);
        xhr.addEventListener("error",errorUp,false);
        xhr.addEventListener("abort",abortUp,false);
        
        xhr.open("POST","php/send/");
        xhr.send(fData);
    };

    reader.onloadstart = function(){        var get_all = get_file_message.getAll(),
            fName = get_all.fileName,
            fType = get_all.fileType,
            fSize = conversion.bytesTosize(get_all.fileSize);        document.querySelector(".upload_message_show").style.display = "block";        document.querySelector(".upload_file_name").innerHTML ="文件名称: " + fName;        document.querySelector(".upload_file_type").innerHTML ="文件类型: " + fType;        document.querySelector(".upload_file_size").innerHTML ="文件大小: " + fSize;        document.querySelector(".isCompleted").innerHTML       ="上传状态: " + (bIs_uploading?"完成":"正在上传中..");

        nFactSize = get_all.fileSize/nSlice_count;
        nFactSize = (nFactSize>=nMin_size*1024*1024?nFactSize:nMin_size*1024*1024);
        nFactSize = (nFactSize<=nMax_size*1024*1024?nFactSize:nMax_size*1024*1024);
        nFactCount= Math.ceil(get_all.fileSize/nFactSize);

        uploadStart();
    };


    reader.readAsBinaryString(file);
}function uploadCount(e,fSize,conversion){    var upSize = e.loaded+nCountNum*nFactSize,
        perc = (upSize*100/fSize).toFixed(2) + "%";    var speed = Math.abs(upSize - nPreuploaded);    if(speed==0){clearTimeout("timer");return;}    var leftTime = conversion.secondsTotime(Math.round((fSize-upSize)/speed));
    speed = conversion.bytesTosize(speed)+"/s";    document.querySelector(".speed").innerHTML = speed;    document.querySelector(".left_time").innerHTML = "剩余时间 | " + leftTime;    document.querySelector(".upload_percent").innerHTML = perc;    document.querySelector(".upload_bar").style.width = perc;
    nPreuploaded = upSize;
}

PHP:

<?php$fsize = $_POST['size'];$findex =$_POST['indexCount'];$ftotal =$_POST['totalCount'];$ftype = $_POST['type'];$fdata = $_FILES['file'];$fname = mb_convert_encoding($_POST['name'],"gbk","utf-8");$truename = mb_convert_encoding($_POST['trueName'],"gbk","utf-8");$path = "../../";$dir = $path."source/".$truename."-".$fsize;$save = $dir."/".$fname;if(!is_dir($dir))
{
    mkdir($dir);
    chmod($dir,0777);
}//读取临时文件内容$temp = fopen($fdata["tmp_name"],"r+");$filedata = fread($temp,filesize($fdata["tmp_name"]));//将分段内容存放到新建的临时文件里面if(file_exists($dir."/".$findex.".tmp")) unlink($dir."/".$findex.".tmp");$tempFile = fopen($dir."/".$findex.".tmp","w+");
fwrite($tempFile,$filedata);
fclose($tempFile);

fclose($temp);if($findex+1==$ftotal)
{    if(file_exists($save)) @unlink($save);    //循环读取临时文件并将其合并置入新文件里面
    for($i=0;$i"success","url"=>mb_convert_encoding($truename."-".$fsize."/".$fname,'utf-8','gbk'));    echo json_encode($res);
}?>

还有一些细节的js这里没给出来,主要就上面的功能,有问题的话欢迎回复,楼主只是个新手,不足之处请大家多多见谅。

点击下载:1473746821670589