LMLPHP后院

去年过年前开发的Chrome浏览器插件，昨晚在我自己的笔记本上测试没有问题，今天来公司一安装就连续出现了很多的报错，下面将错误和解决方案记录如下，相信有不少的网友会碰到类似的问题。首次安装报错如下：

上面的错误系插件版本过低，在高版本Chrome中需要在manifest文件中添加 manifest_version 配置项。

网页上图片很多时，如果不对图片使用懒加载(延迟加载)技术，网站显示速度就会很慢，给用户的感觉很不好，图片资源服务器的负载也会很大，一般不太好的服务商会直接返回 503 Service Unavailable 暂停服务错误。很多网站在处理这个问题时，直接使用 JQuery 的懒加载扩展，这样一来，网站必须要加载 JQuery，速度自然下降。JQuery 是一个很臃肿的 JavaScript 框架，虽然非常强大，但我个人认为不适合做前端，只适合做后台。网站前端的用户一般都不是很经常来，第一次来就要加载这么多的资源，给用户感觉网站非常慢。大部分的网站都是小网站，流量都很小，网站也都是运行在虚拟主机上，这样一来，JQuery 放在自己的站点上流量耗费很大；使用免费的 CDN 也通常不太稳定，并且浏览器得重新解析新的域名，网站速度自然上不去。

前端使用Jcrop实现预览和获取图片大小，选定位置等信息。关于Jcrop，项目地址在GITHUB上，它基于MIT开源协议。本人看了下项目的源代码，感觉作者蛮认真的。Jcrop做到了兼容IE系列和其他主流浏览器，非常稳定，让开发者不再为前端方面花费太多精力。加上本人不太喜欢Flash实现，纯JavaScript实现的功能效率会更高。由于时间比较仓促，代码没有过多的优化，有点乱，下面公布前端实现和服务端处理图片部分代码。

前端实现方式如下：

<link rel="stylesheet" href=".../jcrop/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.css">
<script src=".../jcrop/tapmodo-Jcrop-1902fbc/js/jquery.min.js"></script>
<script src=".../jcrop/tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.js"></script>
<style>
#preview-pane{
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 6px;
    position: absolute;
    right: -160px;
    top: 0;
    z-index: 2000;
}
#preview-pane .preview-container {
    height: 100px;
    overflow: hidden;
    width: 100px;
}
.cropdiv{
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
    height: auto;
    left: 200px;
    opacity: 0.9;
    position: absolute;
    top: 230px;
    width: 600px;
    z-index: 100;
    padding:10px;
}

.cropdiv .preinfo{
    float: right;
    left: 500px;
    position: absolute;
    top: 160px;
}
.cropdiv .title{
    font-size:14px;
    font-weight:bold;
    margin-bottom:10px;
}
.cropdiv .save{
    text-align:center;
}
.cropdiv .save a{
    background-color: #ff832b;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    height: 30px;
    padding:2px 5px;
    font-size:16px;
    margin:5px;
}
</style>
<script>
var startcrop = function( imgsrc ) {
    var jcrop_api, boundx, boundy, posinfo,
    imgsrc_rand = imgsrc + '?' + Math.round(Math.random() * 10000);

    // Grab some information about the preview pane    
    var $preview_html = 
        '<div id="preview-pane">'
            +'<div class="preview-container">'
            +'<img src="" class="jcrop-preview" alt="Preview">'
            +'</div>'
        +'</div>';
    
    $(document.body).append($preview_html);
    var $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),

    xsize = $pcnt.width(),
    ysize = $pcnt.height();
    $pimg.attr('src',imgsrc_rand);
    
    var cropimgdiv = $('<div/>').addClass('cropdiv').css({"opacity":.9})
    .append(function(){
        return $('<div/>').append("<span>编辑头像</span>").addClass('title');;
    })
    .append( function(){
        return $('<img/>').attr( {"src":imgsrc + '?' + Math.round(Math.random() * 10000)
            ,"id":"cropimg"}) 
    })
    .append(function(){
        return $('<div/>').append( $("<a/>").html("保存头像").click(function(){
            $.ajax({
                type:'POST',
                url: 'handle crop url',
                dataType:'json',
                data:{ 'posinfo':posinfo, "boundx":boundx, "boundy":boundy },
                success:function( data ) {
                    // do something on success
                    cropimgdiv.remove();
                    $preview.remove();
                }
            });
        }) ).addClass('save');
    })
    .appendTo(document.body);
    
    if ($("#cropimg").get(0).naturalWidth > 400) {
        $("#cropimg").attr({"width":400});
        JcropRun();
    } else { // IE6/7/8
        var image = new Image()
        image.src = imgsrc_rand;
        image.onload = function(){
            if( image.width > 400){
                $("#cropimg").attr({"width":400});
            }
            JcropRun();
        };
    } 

    function showCoords(c)
    {
        /* variables can be accessed here as
        // c.x, c.y, c.x2, c.y2, c.w, c.h*/
        posinfo = c;
        if (parseInt(c.w) > 0) {
            var rx = xsize / c.w;
            var ry = ysize / c.h;
            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    };
    
    var JcropRun = function(){
        $('#cropimg').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 0, 0 ],
            minSize:   [ 100, 100 ],
            aspectRatio: xsize / ysize
        },function(){
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            $preview.css({"display":"block"});
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
    }
};
</script>

关于如何给添加图片水印，网上流传的代码片段有很多，但是基本都是相同的代码，被各大网站转载的到处都是。网上流传的使用PHP给添加图片水印的代码，一般情况下还能使用，发现不了有什么问题，处理图片量一大，就会发现很多图片添加水印会有问题。给某些图片添加文字水印会出现颜色失效的问题，有时候会出现文字中空问题，有些图片会有锯齿，锯齿可能跟字体有关，同时也跟代码处理方式有关。

本文讲解如何使用PHP为图片添加水印技术，都是作者自己的亲身经验总结，欢迎交流。

添加水印出现文字颜色失效，可能跟PHP自身的函数imagettftext()有关，这个函数直接使用时可能会出现文字颜色失效，一律变成了黑色。该如何解决这个问题呢，于是我想到了创建透明图片，将文字写入到透明图片中，然后合并到背景图，但是这种方式导致了另一个问题出现：文字出现锯齿。为了解决图片水印锯齿问题，最后通过复制背景图片中需要添加水印的区域到创建的透明背景中作为临时图片，然后添加文字水印到这个临时图片上，然后再将这个临时图片贴合到背景图片中，最后完美解决了问题。在贴合的过程中需要注意计算正确的位置，位置计算错误就导致图片变样了。通过这样的方式添加图片水印，还没有出现过任何问题。

技术真的需要总结，人往往是在总结的过程中成长进步的。本人之前也做过很多项目，但是由于种种原因，没有养成总结的习惯，以至于很多东西懂了又忘记，忘记了又知道了。最近的一段时间，我在写LMLPHP框架同时完成官网和博客等其他项目的开发，才发现总结的重要性。下面将例举一些CSS书写需要注意的一些问题，这些问题都是本人在做浏览器兼容的时候发现的，非常重要。对于前端工程师们来说，也许值得一看，欢迎有志之士留言交流。

前端CSS之图片边框

一个人只有从头至尾完成整个WEB项目时，且在不使用外界UI框架时，一定会知道，我们在定义全局样式的时候一定要定义图片的边框属性。这点也是我在做浏览器兼容的时候，发现IE8会默认有蓝色边框。定义图片边框属性，如下代码示例：