summernote 上傳檔案處理

summernote是個很輕量的編輯器，往常都使用CKEditor來提供服務，不過青菜蘿蔔各有所好...其中最常調整的莫過於檔案上傳處理，備忘一下囉...

HTML Header
include id_summernote.css & id_summernote.js
#語系要更換的話，得多include該文本 summernote-zh-TW.js

只需要將DIV放置在愈顯示處
HTML:
<div id="id_summernote" class="summernote"></div>

如果上傳檔案不特別處理的話，預設式以Base64編碼方式存放於編輯區中，這樣存入資料庫將會大大的增加儲存量，於未來存取時可能耗費更多伺服器資源。改成存放圖檔於伺服器中，這樣瀏覽上路由器/交換器/瀏覽器都可能暫存該圖檔資源，而減輕WEB SERVER吞吐頻寬負擔。

JavaScript
<script type="text/javascript">
jQuery(document).ready(function() {
      //載入
              initEditor();
});

  /* 編輯器初始化 */
  function initEditor() {
    $('.summernote').summernote({
        lang: 'zh-TW',       // default: 'en-US'
        toolbar: [
                ["style", ["style"]],
                ["font", ["bold", 'italic', "underline", "clear"]],
                ["fontname", ["fontname"]],
                ['fontsize', ['fontsize']],
    ["color", ["color"]],
                ["para", ["ul", "ol", "paragraph"]],
                ["table", ["table"]],
                ["insert", ["link", "picture", "video", "hr"]],
                ['height', ['height']],
                ["view", ["fullscreen", "codeview", "undo", "redo", "help"]]
            ],
        height: 200,         // set editor height             
        minHeight: null,    // set minimum height of editor
        maxHeight: null,    // set maximum height of editor
        focus: true,         // set focus to editable area after initializing summe
        tabsize: 2,
            dialogsInBody: true,
        callbacks: {
            onImageUpload: function (files) { //the onImageUpload API
                img = sendFile(files[0], $(this));
            }
        }
     
    });  
  }  
  function sendFile(file, editor) {
            data = new FormData();
            data.append("upload", file);         
            $.ajax({
                data: data,
                type: "POST",
                url: "<?=site_url('controler/function'); ?>",
                cache: false,
                contentType: false,
                processData: false,
                success: function (datas) {
                    var data = $.parseJSON(datas);
                    if (data.uploaded == '1')
                      // the insertImage API
                      editor.summernote('insertImage', data.url, 'image name');
                    else
                      console.log(data.error);
                },
error:function(data){
      console.log(data);
}
            });
      }

</script>

至於回傳的資料中，透過JSON編碼方式回傳，這樣有利於處理檔案儲存狀態的追蹤處理。

Nginx return 405 error

最近搬移伺服器，WEB伺服器也同步將Apache改成Nginx，客戶回報標籤列印軟體出現異常無法同步更新，Debug後看到回傳405錯誤，可該URL直接呼叫卻是能取得資料的，爬了些文看到解法...

於conf檔中新增error_page 405 =200 $request_uri;後重啟nginx排除掉問題。

location / {
        error_page 405 =200 $request_uri;
        try_files $uri $uri/ /petel/index.php;
 }

至於後來想想為什麼要用POST方式而不使用GET方式取呢? 往常POST請求也可以做到GET請求的回覆，所以從程式碼共用/使用的方向來想也挺合理的，只不過Apache沒出這種問題吧。

透過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;
}

}