透過CKEditor或Summernote上傳iphone拍的圖片顯示被轉向問題

Bootstrap的RWD設計很方便，不過開發狀況上要考慮的點就挺多的，客戶反映說手機上圖時顯示是反的，但是圖下載下來是正的，乍聽之下挺神奇的不是事實卻是如此。

爬文得知在iphone手機拍攝照片時，會取決於拍照按鈕位置來存檔，所以在圖片的Orientation的狀態上就可能是旋轉的，不過在PC檢視上通常會自動轉回來可是瀏覽器就...參考網誌

另外因為手機的鏡頭跟效能越來越強，所以照片的解析度SIZE變超大，看起來是很舒服不過在WEB應用上就挺占頻寬的，簡單的壓縮功能就一併去實現囉。

//圖檔壓縮與旋轉
function image_resize($targetFile){
if (file_exists($targetFile)){
$img_array = getimagesize($targetFile);
$isResize = false;
$ratio = 512;
if ($img_array[0] > $ratio){
$config['width'] = $ratio;
$height = $img_array[1] / ($img_array[0] / $ratio);
$config['height'] = intval($height);
$isResize = true;
} else if ($img_array[1] > $ratio){
$config['height'] = $ratio;
$width = $img_array[0] / ($img_array[1] / $ratio);
$config['width'] = intval($width);
$isResize = true;
}
if ($isResize){
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = $targetFile;
$config['maintain_ratio'] = TRUE;

//because iphone photo maybe save rotation by sensor
$exif = @exif_read_data($targetFile);
if(!empty($exif['Orientation'])) {
switch($exif['Orientation']) {
  case 8:
   $config['rotation_angle'] = '90';
   break;
  case 3:
   $config['rotation_angle'] = '180';
   break;
  case 6:
   $config['rotation_angle'] = '270';
   break;
}
$this->image_lib->initialize($config);
$this->image_lib->rotate();
}
$config['rotation_angle'] = '0';
$this->image_lib->initialize($config);
$this->image_lib->resize();
}

return true;
} else {
return false;
}

}

啟用 OCSP 加快Apache速度

最近做壓測結果瓶頸點首先出現在SSL上面，想說透過HAProxy來處理443 frontend to 80 backend，不過測試上還需要些時間(也不確定穩定與否)，爬到這篇文章參考網誌貌似能改善些，留存備忘嚕...

1. 檢查你的 OCSP 是否有開啟，在下列網站輸入網址查詢 https://www.digicert.com/help/

2. 啟用 OCSP on Apache Server，httpd.conf新增設定，然後重啟服務。

OCSP httpd.conf

<IfModule ssl_module>
    SSLUseStapling on
    SSLStaplingResponderTimeout 5
    SSLStaplingReturnResponderErrors off                                                                                 
    SSLStaplingCache shmcb:/var/httpd/stapling_cache(128000)
</IfModule>

[CentOS7] Ngnix 搭配 PHP-FPM + APACHE 設定SSL

在CentOS 7下(包含安裝EPEL)

wget http://dl.fedoraproject.org/pub/epel/ ... l-release-7-11.noarch.rpm
wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
rpm -Uvh remi-release-7*.rpm epel-release-7*.rpm

首先移除舊的
yum remove php-common

安裝相關套件
yum install php56w php56w-mysql php56w-gd php56w-ldap php56w-odbc php56w-pear
php56w-xml php56w-xmlrpc php56w-mbstring php56w-snmp php56w-mcrypt php56w-common php56w-opcache php56w-fpm php56w-imap


設定 PHP 設定檔

vim /etc/php.ini
session.save_handler = files

session.save_path = "/var/lib/php/session" 

 date.timezone = "Asia/Taipei" 

error_reporting = E_ALL & ~E_NOTICE 

display_errors = On 

magic_quotes_gpc = Off
post_max_size = 8M

設定 PHP-FPM 設定檔

vim  /etc/php-fpm.conf
include=/etc/php-fpm.d/*.conf 

 [global]

 pid = /var/run/php-fpm/php-fpm.pid 

 error_log = /var/log/php-fpm/error.log


設定 PHP-FPM 的 POOL 設定檔 

vim /etc/php-fpm.d/www.conf
[www] 

 listen = /var/run/php-fpm/php-fpm.sock

 listen.owner = nobody

 listen.group = nobody

 user = nginx

 group = nginx

 pm = dynamic

 pm.max_children = 50

 pm.start_servers = 5

 pm.min_spare_servers = 5

 pm.max_spare_servers = 35

 slowlog = /var/log/php-fpm/www-slow.log

 php_admin_value[error_log] = /var/log/php-fpm/www-error.log 

 php_admin_flag[log_errors] = on
 php_value[session.save_handler] = files
 php_value[session.save_path] = /var/lib/php/session

預設 Log 檔的權限

#chown -R nginx:nginx /var/log/php-fpm

預設 PHP SESSION 檔的權限

#mkdir /var/lib/php/session 

#chmod 766 /var/lib/php/session
#chown -R nginx:nginx /var/lib/php

啟用 php-fpm 

#systemctl start php-fpm 

#systemctl enable php-fpm

安裝 Apache mod_ssl

首先用 YUM 安裝 mod_ssl:

# yum install mod_ssl

取得憑證的CSR CRT跟CA檔

# vim /etc/httpd/conf.d/ssl.conf

DocumentRoot “/var/www/html”

ServerName www.yourdomain.com

SSLCertificateFile /ssl/ca.crt

SSLCertificateKeyFile /ssl/myserver.key

SSLCACertificateFile /ssl/ca_myserver.crt

因為使用 SSLv3 或以下有安全問題, 需要關閉 SSLv3, 找到以下一行:

SSLProtocol all -SSLv2

改為:

SSLProtocol all -SSLv2 -SSLv3

儲存檔案後離開, 並重新啟動 Apache:

# systemctl restart apache

若出現 php5-fpm.sock failed (13: Permission denied) 解法。

CKEDITOR在Bootstrap Model中功能視窗跳到背景的FIX

套用RWD頁面很方便，但有些眉眉角角就得特別處理，CKEDITOR很好用兩個勾稽在一起，熊熊發現不是那麼的圓滿，當然官方也是都有解的，要找而已...Memo囉。

大體來講這個問題出在版面上，所以調整上還是不脫CSS跟JS的配合。
解決方式:
CSS
<style type="text/css">
    /* (style-metronic)modal conflict with popup of ckeditor (fix) */
.modal-backdrop {
    z-index: 1040 !important;
}
.modal {
    z-index: 1050 !important;
}
</style>

JS
<script>
// CKEditor Link input not working in bootstrap modal (fix)
$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal',
        function (e) {
            var $parent = $(e.target.parentNode);
            if ($modalElement[0] !== e.target &&
                !$modalElement.has(e.target).length &&
                !$parent.hasClass('cke_dialog_ui_input_select') &&
                !$parent.hasClass('cke_dialog_ui_input_text')) {
                $modalElement.focus();
            }
        });
};
</script>

很棒的註解，分享自鍾興叡老師（老師全盲）

●胸口摸得著的尺寸叫---胸圍；胸口摸不到的尺寸叫---胸襟。

●眼睛看得到的地方叫---視線；眼睛看不到的地方叫---視野。

●嘴裡說得出來的話叫---內容；嘴裡說不出來的話叫---內涵。

●手上比劃出來的動作叫---手勢；比劃不出來的動作叫---手段。

●腦子裡測的出的東西叫---智商；腦子裡測不出的東西叫---智慧。

●耳朵聽得到的動是---聲音；耳朵聽不到的動是---聲譽。

●証件上印出來的叫---文憑；証件上印不出的叫---文化。

●溫度計量出的熱呼叫---溫度；溫度計量不出來的熱呼叫---溫暖。

●手指寫得出的文字叫---文章；手指寫不出的文字叫---生命。

●鏡子裡看得到的是---自己；鏡子看不到的是---自我。

●金錢衡量出的是---價格；金錢衡量不出的是---價值。

●存款顯示的出來的叫---財產；顯示不出來的叫---財富。

●牽掛在嘴上的叫---情話；牽掛在心裡的叫---情感。