webp 이미지를 업로드 할 수 있도록 수정 중

bbs/qawrite_update.php

@@ -197,7 +197,8 @@ for ($i=1; $i<=$upload_count; $i++) {
         // image type
         if ( preg_match("/\.({$config['cf_image_extension']})$/i", $filename) ||
              preg_match("/\.({$config['cf_flash_extension']})$/i", $filename) ) {
-            if ($timg['2'] < 1 || $timg['2'] > 16)
+            // webp 파일의 type 이 18 이므로 업로드가 가능하도록 수정
+            if ($timg['2'] < 1 || $timg['2'] > 18)
                 continue;
         }
         //=================================================================

bbs/view_image.php

@@ -12,7 +12,7 @@ if(function_exists('clean_relative_paths')){
 
 $extension = pathinfo($filename, PATHINFO_EXTENSION);
 
-if ( ! preg_match('/(jpg|jpeg|png|gif|bmp)$/i', $extension) ){
+if ( ! preg_match('/(jpg|jpeg|png|gif|bmp|webp)$/i', $extension) ){
     alert_close('이미지 확장자가 아닙니다.');
 }
 

bbs/write_update.php

@@ -532,7 +532,7 @@ if(isset($_FILES['bf_file']['name']) && is_array($_FILES['bf_file']['name'])) {
             // image type
             if ( preg_match("/\.({$config['cf_image_extension']})$/i", $filename) ||
                  preg_match("/\.({$config['cf_flash_extension']})$/i", $filename) ) {
-                if ($timg['2'] < 1 || $timg['2'] > 16)
+                if ($timg['2'] < 1 || $timg['2'] > 18)
                     continue;
             }
             //=================================================================

lib/get_data.lib.php

@@ -294,7 +294,7 @@ function get_thumbnail_find_cache($bo_table, $wr_id, $wr_key){
         return get_write($write_table, $wr_id, true);
     }
 
-    return get_board_file_db($bo_table, $wr_id, 'bf_file, bf_content', "and bf_type between '1' and '3'", true);
+    return get_board_file_db($bo_table, $wr_id, 'bf_file, bf_content', "and bf_type in (1, 2, 3, 18) ", true);
 }
 
 function get_write_table_name($bo_table){

lib/latest.lib.php

@@ -70,7 +70,7 @@ function latest($skin_dir='', $bo_table, $rows=10, $subject_len=40, $cache_time=
             }
             $list[$i] = get_list($row, $board, $latest_skin_url, $subject_len);
 
-            $list[$i]['first_file_thumb'] = (isset($row['wr_file']) && $row['wr_file']) ? get_board_file_db($bo_table, $row['wr_id'], 'bf_file, bf_content', "and bf_type between '1' and '3'", true) : array('bf_file'=>'', 'bf_content'=>'');
+            $list[$i]['first_file_thumb'] = (isset($row['wr_file']) && $row['wr_file']) ? get_board_file_db($bo_table, $row['wr_id'], 'bf_file, bf_content', "and bf_type in (1, 2, 3, 18) ", true) : array('bf_file'=>'', 'bf_content'=>'');
             $list[$i]['bo_table'] = $bo_table;
             // 썸네일 추가
             if($options && is_string($options)) {

lib/thumbnail.lib.php

@@ -226,8 +226,18 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
     if(!is_file($source_file)) // 원본 파일이 없다면
         return;
 
+
     $size = @getimagesize($source_file);
-    if(!isset($size[2]) || $size[2] < 1 || $size[2] > 3) // gif, jpg, png 에 대해서만 적용
+
+    $extensions = array(1 => 'gif', 2 => 'jpg', 3 => 'png', 18 => 'webp');
+    $file_ext = $extensions[$size[2]]; // 파일 확장자
+
+    // gif, jpg, png, webp 에 대해서만 적용
+    // if ( !(isset($size[2]) && ($size[2] == 1 || $size[2] == 2 || $size[2] == 3 || $size[2] == 18)) ) 
+    //     return;
+
+    // $extensions 배열에 없는 확장자 라면 썸네일 만들지 않음
+    if (!in_array($file_ext, $extensions))
         return;
 
     if (!is_dir($target_path)) {
@@ -240,16 +250,19 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
         return '';
 
     // Animated GIF는 썸네일 생성하지 않음
-    if($size[2] == 1) {
+    if($file_ext === 'gif') {
         if(is_animated_gif($source_file))
             return basename($source_file);
+    } else if ($file_ext === 'webp') {
+        if(is_animated_webp($source_file))
+            return basename($source_file);
     }
 
-    $ext = array(1 => 'gif', 2 => 'jpg', 3 => 'png');
 
     $thumb_filename = preg_replace("/\.[^\.]+$/i", "", $filename); // 확장자제거
-    $thumb_file = "$target_path/thumb-{$thumb_filename}_{$thumb_width}x{$thumb_height}.".$ext[$size[2]];
+    // $thumb_file = "$target_path/thumb-{$thumb_filename}_{$thumb_width}x{$thumb_height}.".$ext[$size[2]];
-
+    $thumb_file = "$target_path/thumb-{$thumb_filename}_{$thumb_width}x{$thumb_height}.".$file_ext;
+    
     $thumb_time = @filemtime($thumb_file);
     $source_time = @filemtime($source_file);
 
@@ -263,10 +276,10 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
     $src = null;
     $degree = 0;
 
-    if ($size[2] == 1) {
+    if ($file_ext === 'gif') {
         $src = @imagecreatefromgif($source_file);
         $src_transparency = @imagecolortransparent($src);
-    } else if ($size[2] == 2) {
+    } else if ($file_ext === 'jpg') {
         $src = @imagecreatefromjpeg($source_file);
 
         if(function_exists('exif_read_data')) {
@@ -298,9 +311,12 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
                 }
             }
         }
-    } else if ($size[2] == 3) {
+    } else if ($file_ext === 'png') {
         $src = @imagecreatefrompng($source_file);
         @imagealphablending($src, true);
+    } else if ($file_ext === 'webp') {
+        $src = @imagecreatefromwebp($source_file);
+        @imagealphablending($src, true);
     } else {
         return;
     }
@@ -363,10 +379,10 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
 
             $dst = imagecreatetruecolor($dst_w, $dst_h);
 
-            if($size[2] == 3) {
+            if($file_ext === 'png') {
                 imagealphablending($dst, false);
                 imagesavealpha($dst, true);
-            } else if($size[2] == 1) {
+            } else if($file_ext === 'gif') {
                 $palletsize = imagecolorstotal($src);
                 if($src_transparency >= 0 && $src_transparency < $palletsize) {
                     $transparent_color   = imagecolorsforindex($src, $src_transparency);
@@ -391,12 +407,12 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
                 }
             }
 
-            if($size[2] == 3) {
+            if($file_ext === 'png') {
                 $bgcolor = imagecolorallocatealpha($dst, 0, 0, 0, 127);
                 imagefill($dst, 0, 0, $bgcolor);
                 imagealphablending($dst, false);
                 imagesavealpha($dst, true);
-            } else if($size[2] == 1) {
+            } else if($file_ext === 'gif') {
                 $palletsize = imagecolorstotal($src);
                 if($src_transparency >= 0 && $src_transparency < $palletsize) {
                     $transparent_color   = imagecolorsforindex($src, $src_transparency);
@@ -474,12 +490,12 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
             }
         }
 
-        if($size[2] == 3) {
+        if($file_ext === 'png') {
             $bgcolor = imagecolorallocatealpha($dst, 0, 0, 0, 127);
             imagefill($dst, 0, 0, $bgcolor);
             imagealphablending($dst, false);
             imagesavealpha($dst, true);
-        } else if($size[2] == 1) {
+        } else if($file_ext === 'gif') {
             $palletsize = imagecolorstotal($src);
             if($src_transparency >= 0 && $src_transparency < $palletsize) {
                 $transparent_color   = imagecolorsforindex($src, $src_transparency);
@@ -502,22 +518,24 @@ function thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_h
         UnsharpMask($dst, $val[0], $val[1], $val[2]);
     }
 
-    if($size[2] == 1) {
+    if($file_ext === 'gif') {
         imagegif($dst, $thumb_file);
-    } else if($size[2] == 3) {
+    } else if($file_ext === 'png') {
         if(!defined('G5_THUMB_PNG_COMPRESS'))
             $png_compress = 5;
         else
             $png_compress = G5_THUMB_PNG_COMPRESS;
 
         imagepng($dst, $thumb_file, $png_compress);
-    } else {
+    } else if ($file_ext === 'jpg') {
         if(!defined('G5_THUMB_JPG_QUALITY'))
             $jpg_quality = 90;
         else
             $jpg_quality = G5_THUMB_JPG_QUALITY;
 
         imagejpeg($dst, $thumb_file, $jpg_quality);
+    } else if ($file_ext === 'webp') {
+        imagewebp($dst, $thumb_file);
     }
 
     chmod($thumb_file, G5_FILE_PERMISSION); // 추후 삭제를 위하여 파일모드 변경
@@ -695,6 +713,22 @@ and the roundoff errors in the Gaussian blur process, are welcome.
 
 }
 
+// 움직이는 webp 파일인지 검사한다.
+// 출처) https://stackoverflow.com/questions/45190469/how-to-identify-whether-webp-image-is-static-or-animated?answertab=votes#tab-top
+function is_animated_webp($filename) {
+    $contents = file_get_contents($filename);
+    $where = strpos($contents, "ANMF");
+    if ($where !== false){
+        // animated
+        $is_animated = true;
+    }
+    else{
+        // non animated
+        $is_animated = false;
+    }
+    return $is_animated;
+}
+
 function is_animated_gif($filename) {
 
     static $cache = array();

plugin/editor/smarteditor2/photo_uploader/popup/js/basic.js

@@ -22,7 +22,7 @@ jQuery(function ($) {
         dreg_area : '#drag_area',
         dreg_area_list : '#drag_area > ul',
         progress_bar : '#progress .progress-bar',
-        filter : /^(image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i,
+        filter : /^(image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png|image\/webp)$/i,
         files : [],
         file_limit : 10, //한번에 올릴수 파일갯수 제한
         imgw : 100,
@@ -102,8 +102,7 @@ jQuery(function ($) {
                         
                     }
                     if (!index) {
-                        node
+                        node.prepend('<br>')
-                            .prepend('<br>')
                             .prepend($img);
                         if(size_text){
                             node.append('<br>')

plugin/editor/smarteditor2/photo_uploader/popup/php/UploadHandler.php

@@ -26,6 +26,7 @@ class UploadHandler
         "image/jpg"       => array("imagecreatefromjpeg", "imagejpeg"),
         "image/jpeg"      => array("imagecreatefromjpeg", "imagejpeg"),
         "image/png"       => array("imagecreatefrompng", "imagepng"),
+        "image/webp"      => array("imagecreatefromwebp", "imagewebp"),
         "image/bmp"       => array("imagecreatefromwbmp", "imagewbmp")
     );
 
@@ -93,10 +94,10 @@ class UploadHandler
             // is enabled, set to 0 to disable chunked reading of files:
             'readfile_chunk_size' => 10 * 1024 * 1024, // 10 MiB
             // Defines which files can be displayed inline when downloaded:
-            'inline_file_types' => '/\.(gif|jpe?g|bmp|png)$/i',
+            'inline_file_types' => '/\.(gif|jpe?g|bmp|png|webp)$/i',
             // Defines which files (based on their names) are accepted for upload:
             //'accept_file_types' => '/.+$/i',
-            'accept_file_types' => '/\.(gif|jpe?g|bmp|png)$/i',
+            'accept_file_types' => '/\.(gif|jpe?g|bmp|png|webp)$/i',
             // The php.ini settings upload_max_filesize and post_max_size
             // take precedence over the following max_file_size setting:
             'max_file_size' => null,
@@ -104,7 +105,7 @@ class UploadHandler
             // The maximum number of files for the upload directory:
             'max_number_of_files' => null,
             // Defines which files are handled as image files:
-            'image_file_types' => '/\.(gif|jpe?g|bmp|png)$/i',
+            'image_file_types' => '/\.(gif|jpe?g|bmp|png|webp)$/i',
             'is_resize' => (defined('SMARTEDITOR_UPLOAD_RESIZE') && SMARTEDITOR_UPLOAD_RESIZE) ? true : false,
             'resize_max_width' => (defined('SMARTEDITOR_UPLOAD_MAX_WIDTH') && SMARTEDITOR_UPLOAD_MAX_WIDTH) ? SMARTEDITOR_UPLOAD_MAX_WIDTH : 800,
             'resize_max_height' => (defined('SMARTEDITOR_UPLOAD_MAX_HEIGHT') && SMARTEDITOR_UPLOAD_MAX_HEIGHT) ? SMARTEDITOR_UPLOAD_MAX_HEIGHT : 800,
@@ -498,7 +499,7 @@ class UploadHandler
         }
         // Add missing file extension for known image types:
         if (strpos($name, '.') === false &&
-                preg_match('/^image\/(gif|jpe?g|png)/', $type, $matches)) {
+                preg_match('/^image\/(gif|jpe?g|png|webp)/', $type, $matches)) {
             $name .= '.'.$matches[1];
         }
         if (function_exists('exif_imagetype') && $file_path) {
@@ -512,6 +513,9 @@ class UploadHandler
                 case IMAGETYPE_GIF:
                     $extensions = array('gif');
                     break;
+                case IMAGETYPE_WEBP:
+                    $extensions = array('webp');
+                    break;
             }
             // Adjust incorrect image file extensions:
             if (!empty($extensions)) {
@@ -688,7 +692,7 @@ class UploadHandler
                 $src_func = 'imagecreatefromjpeg';
                 $write_func = 'imagejpeg';
                 $image_quality = isset($options['jpeg_quality']) ?
-                    $options['jpeg_quality'] : 75;
+                $options['jpeg_quality'] : 75;
                 break;
             case 'gif':
                 $src_func = 'imagecreatefromgif';
@@ -699,7 +703,12 @@ class UploadHandler
                 $src_func = 'imagecreatefrompng';
                 $write_func = 'imagepng';
                 $image_quality = isset($options['png_quality']) ?
-                    $options['png_quality'] : 9;
+                $options['png_quality'] : 9;
+                break;
+            case 'webp':
+                $src_func = 'imagecreatefromwebp';
+                $write_func = 'imagewebp';
+                $image_quality = null;
                 break;
             default:
                 return false;
@@ -1087,7 +1096,12 @@ class UploadHandler
             $image_from_file = self::$MIME_TYPES_PROCESSORS[$mime_type][0];
             $image_to_file = self::$MIME_TYPES_PROCESSORS[$mime_type][1];
 
+            // webp 의 경우 gd-webp cannot allocate temporary buffer 오류가 발생하여 webp 이미지가 업로드 되지 않을 수 있음
+            // $reprocessed_image = imagecreatefromwebp($file_path); 이 코드로 웹서버의 error_log 에서 확인해 볼 수 있음
+            // https://stackoverflow.com/questions/61394477/php-e-error-gd-webp-cannot-allocate-temporary-buffer
+            // 움직이는 webp 이미지나 큰사이즈의 webp 이미지에 대한 해결 방안은 아직 없는 것 같다
             $reprocessed_image = @$image_from_file($file_path);
+            // error_log("\$image_from_file = '$image_from_file',  \$image_to_file = '$image_to_file', \$reprocessed_image = '$reprocessed_image' ");
 
             if (!$reprocessed_image) {
               //throw new Exception("Unable to create reprocessed image from file");
@@ -1288,6 +1302,8 @@ class UploadHandler
                 return 'image/png';
             case 'gif':
                 return 'image/gif';
+            case 'webp':
+                return 'image/webp';
             default:
                 return '';
         }

plugin/editor/smarteditor2/photo_uploader/popup/swfupload/handlers.js

@@ -287,7 +287,7 @@ function preview(thumb) {
 			var thumb = file.bf_file;
 		}
 		
-		var pattern = /\.(jpg|png|gif)$/i;
+		var pattern = /\.(jpg|png|gif|webp)$/i;
 		if (pattern.test(thumb)) {
 			var thumb_kind = "img";
 		} else {
@@ -321,7 +321,7 @@ function file_to_editor() {
 				var file = get_file_info(files_list.options[i].value);
 				var path = board_file_path + '/' + file.bf_file;
 				
-				var pattern = /\.(jpg|png|gif)$/i;
+				var pattern = /\.(jpg|png|gif|webp)$/i;
 				if (pattern.test(file.bf_file)) {
 					if (wr_id) {
 						html = "{이미지:" + file.bf_no + "}";