分类 HTML,CSS,JS,PHP 下的文章

html5应用,可以直接使用file功能调用相机拍照并上传,但是在iOS上有个奇葩的问题,图片不会自动翻转,上传到服务器上的图片可能是倒立的。

解决此问题有2种思路:

1.使用客户端JS检测图片信息,旋转后再上传。此方法实现需消耗客户端资源。

懒得整理js代码了,暂时按下不表。

2.使用服务端PHP检测图片信息,旋转后保存。此方法需要消耗少量的服务器资源。

function correct_image_orientation($target) {
    if(!function_exists('exif_read_data')) {
        return false;
    }
    $exif = exif_read_data($target);
    if($exif && isset($exif['Orientation']) && $exif['Orientation'] != 1) {
        switch ($exif['Orientation']) {
            case 3: $deg = 180; break;
            case 6: $deg = 270; break;
            case 8: $deg = 90; break;
            default: $deg = 0;
        }
        if($deg > 0) {
            $img = imagecreatefromjpeg($target);
            $img = imagerotate($img, $deg, 0);
            imagejpeg($img, $target, 95);
        }
    }
}

1、该效果使用CSS3的column-width实现,和js版的瀑布流不同:图片将纵向排列。

2、代码中使用了一小段JS,和瀑布流效果无关,主要用来动态插入元素,并实现模拟翻页。

<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>瀑布流(html5,css3,column) - by http://www.anrip.com</title>
<style>
* {
    padding: 0;
    margin: 0;
}
#waterfall {
    margin: 15px 15px -15px 15px;
    position: relative;
    -webkit-column-width: 200px;
       -moz-column-width: 200px;
            column-width: 200px;
}
#waterfall div {
    width: 100%;
    background: #eee;
    margin-bottom: 15px;
    display: inline-block;
}
</style>
</head>
<body>
<div id="waterfall"></div>
<input type="button" onclick="more()" value="加载更多..."/>
<script type="text/javascript">
    var i = 0;
    function more() {
        var w = document.getElementById('waterfall');
        for(var n = i + 30; i < n; i++) {
            height = Math.floor( Math.random()*200 + 200 );
            w.innerHTML += '<div style="height:' + height + 'px;">'+i+'</div>';
        }
    }
    more();
</script>
</body>
</html>

三个函数均可把字符串作为 URI 组件进行编码。

escape/unescape

该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。

ECMAScript v3 反对使用该方法,应用使用 encodeURI() 和 encodeURIComponent() 替代它。

encodeURI/decodeURI

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

如果 URI 组件中含有分隔符,比如 ? 和 #,则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

encodeURIComponent/decodeURIComponent

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。
其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

在写ArkPlus框架过程中一直使用的基于PDO驱动的MySQL,因为项目需求,要转一个SQLite版本,于是写了这个简单的转换函数,实现MySQL建表语句到SQLite的平滑转换,有需要的童鞋们可以拿去。

/**
 * mysql(ctreate_table)转sqlite语句
 * @author anrip[mail@anrip.com]
 * @version 2.1, 2013-01-18 17:02
 * @link http://www.anrip.com/?arkplus
 */
function ark_table_mysql2sqlite($sql) {
  $expr = array(
    '/`(\w+)`\s/' => '[$1] ',
    '/\s+UNSIGNED/i' => '',
    '/\s+[A-Z]*INT(\([0-9]+\))/i' => ' INTEGER$1',
    '/\s+INTEGER\(\d+\)(.+AUTO_INCREMENT)/i' => ' INTEGER$1',
    '/\s+AUTO_INCREMENT(?!=)/i' => ' PRIMARY KEY AUTOINCREMENT',
    '/\s+ENUM\([^)]+\)/i' => ' VARCHAR(255)',
    '/\s+ON\s+UPDATE\s+[^,]*/i' => ' ',
    '/\s+COMMENT\s+(["\']).+\1/iU' => ' ',
    '/[\r\n]+\s+PRIMARY\s+KEY\s+[^\r\n]+/i' => '',
    '/[\r\n]+\s+UNIQUE\s+KEY\s+[^\r\n]+/i' => '',
    '/[\r\n]+\s+KEY\s+[^\r\n]+/i' => '',
    '/,([\s\r\n])+\)/i' => '$1)',
    '/\s+ENGINE\s*=\s*\w+/i' => ' ',
    '/\s+CHARSET\s*=\s*\w+/i' => ' ',
    '/\s+AUTO_INCREMENT\s*=\s*\d+/i' => ' ',
    '/\s+DEFAULT\s+;/i' => ';',
    '/\)([\s\r\n])+;/i' => ');',
  );
  $sql = preg_replace(array_keys($expr), array_values($expr), $sql);
  return $sql === null ? '{table_mysql2sqlite_error}' : $sql;
}

在审查项目代码的过程中,发现一处计算时间的地方很是难懂,于是耐着性子看了下去,看完那300多行代码,我终于明悟了它们只是为了获取几个时间段而存在,苦闷!

下面给出我的计算方法(或许还有更简洁的方法,烦请告知);免得有些人再写300行代码去实现~~

//年/月/日/星期/本月天数
list($year, $month, $day, $week, $days) = explode('/', date('Y/m/d/w/t'));
//计算今日时间范围
echo '<br/>本日开始 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-'.$day));
echo '<br/>本日结束 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-'.$day)+86399);
//计算本周时间范围
echo '<br/>本周开始 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-'.$day)-86400*$week);
echo '<br/>本周结束 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-'.$day)+86400*(7-$week)-1);
//计算本月时间范围
echo '<br/>本月开始 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-1'));
echo '<br/>本月结束 '.date('Y-m-d H:i:s w', strtotime($year.'-'.$month.'-'.$days)+86399);