LMLPHP后院

前端使用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>

无意中发现了一句美丽的歌词：

I see the river in the daylight

Glistening as it flows its way

在网上找了找，才知道是海莉·韦斯特娜的歌《Blooming Flower》。据说这首歌和周华健的《花心》同是翻唱自日本的一首歌，两首歌的旋律是一样的，都是日本人作曲。但是这首歌的歌词比《花心》更有韵味，喜欢的朋友可以听听，下面附上歌词。

时下，很多网站都直接在网页源文件中加载 Jquery，或者直接在头部标签中载入大量的 JS 和 CSS，这些网站中也不乏很多流量较大的网站。其实这种做法是不理智的，也是极其不负责的行为。相信大家都有这样的经历，一个网页打开后，浏览器一直在转圈圈，让眼睛看着很不舒服，网页也非常的卡，页面中很多东西都没有生效，这些都是网站在设计过程中的不负责导致的。

LMLJS 框架是 LML 团队打造的继 LMLPHP，WEBCHAT 之后的又一开源程序。LMLJS，为更少的等待而生。LMLJS 框架 GITHUB 地址：https://github.com/leiminglin/LMLJS，它遵循 MIT 开源协议，可以免费使用。LMLJS 框架实现了对图片，JS，CSS 等的延迟加载，内置 Deferred 对象、getElementsByClassName 方法、LoadJS 方法等，框架本身保持极小的体积(LMLJS 压缩后不足1KB)，兼容 IE6 及以上系列浏览器和当今所有主流浏览器，在项目中官方还提供很多实用的 JS 功能库，并在不断更新中。使用 LMLJS 框架，让您的网站跑的更快。

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

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

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

为什么所有设备上的Wifi图标被设计成一个发射波的形状呢？如果说到用户体验，市面上所有的手机上的Wifi图标都是一个样，对于普通的老百姓，甚至于00后的孩子们来说，他们不也都残酷的接受了这样一个事实。这个世界上大多数事情，大多数人都是只能接受的了。

今年9月份的时候，我去姐姐家过了中秋。见到了我的外甥女，她比去年又长高了许多，已经160了，看起来完全不再像是一个小孩子了。外甥女是03年出生的，在读六年级，性格很活泼也很开朗。她很听话，性格温顺，姐姐给了个联想的安卓手机让她在学校用。在物质上她这点比其他的孩子要好，不怎么在乎手机的品牌。我问她，你们班多少人有手机呢，她说基本上都有。我说，现在的小学生不得了啊，都有手机了。我再问，都是苹果手机吗，他回答，百分之八九十吧。其实，在中国爱慕虚荣的人太多，人在这样一个环境下，能看淡物质也不容易的。很多人，都是死要面子活受罪。在公交车上，地铁上，餐厅到处都是苹果手机，我就感觉不出苹果它哪里好了，我有个同事买了个iPhone4s打开微信浏览器就会卡死，测试经常用我的安卓手机测试。我现在想想，在学生时代，没有经济来源，更容易痴迷于物质带来的优越感，一旦走上社会，开始工作了，奋斗了，就不会很在乎这些了。