perf: 预览图片尺寸的优化

app/Http/Controllers/Api/FileController.php

@@ -525,7 +525,8 @@ class FileController extends AbstractController
                 Base::makeDir(public_path($tmpPath));
                 $tmpPath .= md5($text) . "." . $matchs[1][$key];
                 if (file_put_contents(public_path($tmpPath), base64_decode($text))) {
-                    $data['content'] = str_replace($matchs[0][$key], '<img src="' . Base::fillUrl($tmpPath) . '"', $data['content']);
+                    $paramet = getimagesize(public_path($tmpPath));
+                    $data['content'] = str_replace($matchs[0][$key], '<img src="' . Base::fillUrl($tmpPath) . '" original-width="' . $paramet[0] . '" original-height="' . $paramet[1] . '"', $data['content']);
                     $isRep = true;
                 }
             }

app/Models/ProjectTaskContent.php

@@ -67,7 +67,8 @@ class ProjectTaskContent extends AbstractModel
             Base::makeDir(public_path($tmpPath));
             $tmpPath .= md5($text) . "." . $matchs[1][$key];
             if (file_put_contents(public_path($tmpPath), base64_decode($text))) {
-                $content = str_replace($matchs[0][$key], '<img src="{{RemoteURL}}' . $tmpPath . '"', $content);
+                $paramet = getimagesize(public_path($tmpPath));
+                $content = str_replace($matchs[0][$key], '<img src="{{RemoteURL}}' . $tmpPath . '" original-width="' . $paramet[0] . '" original-height="' . $paramet[1] . '"', $content);
             }
         }
         $pattern = '/<img(.*?)src=("|\')https*:\/\/(.*?)\/(uploads\/task\/content\/(.*?))\2/is';

app/Models/ProjectTaskFile.php

@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use App\Module\Base;
+use Cache;
 
 /**
  * App\Models\ProjectTaskFile
@@ -19,6 +20,8 @@ use App\Module\Base;
  * @property int|null $download 下载次数
  * @property \Illuminate\Support\Carbon|null $created_at
  * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read int $height
+ * @property-read int $width
  * @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile newModelQuery()
  * @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile newQuery()
  * @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile query()
@@ -38,6 +41,11 @@ use App\Module\Base;
  */
 class ProjectTaskFile extends AbstractModel
 {
+    protected $appends = [
+        'width',
+        'height',
+    ];
+
     /**
      * 地址
      * @param $value
@@ -57,4 +65,50 @@ class ProjectTaskFile extends AbstractModel
     {
         return Base::fillUrl($value ?: Base::extIcon($this->ext));
     }
+
+    /**
+     * 宽
+     * @return int
+     */
+    public function getWidthAttribute()
+    {
+        $this->generateSizeData();
+        return $this->appendattrs['width'];
+    }
+
+    /**
+     * 高
+     * @return int
+     */
+    public function getHeightAttribute()
+    {
+        $this->generateSizeData();
+        return $this->appendattrs['height'];
+    }
+
+    /**
+     * 生成尺寸数据
+     */
+    private function generateSizeData()
+    {
+        if (!isset($this->appendattrs['width'])) {
+            $width = -1;
+            $height = -1;
+            if (in_array($this->ext, ['jpg', 'jpeg', 'gif', 'png'])) {
+                $path = public_path($this->getRawOriginal('path'));
+                [$width, $height] = Cache::remember("File::size-" . md5($path), now()->addDays(7), function () use ($path) {
+                    $width = -1;
+                    $height = -1;
+                    if (file_exists($path)) {
+                        $paramet = getimagesize($path);
+                        $width = $paramet[0];
+                        $height = $paramet[1];
+                    }
+                    return [$width, $height];
+                });
+            }
+            $this->appendattrs['width'] = $width;
+            $this->appendattrs['height'] = $height;
+        }
+    }
 }

resources/assets/js/components/PreviewImage/components/swipe.vue

@@ -54,7 +54,10 @@ export default {
                         if (item.src) {
                             item.src = $A.rightDelete(item.src, "_thumb.jpg");
                         }
-                        return item
+                        if (parseInt(item.width) > 0 && parseInt(item.height) > 0) {
+                            return item
+                        }
+                        item = item.src;
                     }
                     return {
                         html: `<div class="preview-image-swipe"><img src="${$A.rightDelete(item, "_thumb.jpg")}"/></div>`,

resources/assets/js/components/TEditor.vue

@@ -508,15 +508,23 @@
             },
 
             getValueImages() {
-                let imgs = [];
+                const imgs = [];
-                let imgReg = /<img.*?(?:>|\/>)/gi;
+                const imgReg = /<img.*?(?:>|\/>)/gi,
-                let srcReg = /src=['"]?([^'"]*)['"]?/i;
+                    srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"),
-                let array = (this.getContent() + "").match(imgReg);
+                    widthReg = new RegExp("original-width=\"(\\d+)\""),
+                    heightReg = new RegExp("original-height=\"(\\d+)\"")
+                const array = (this.getContent() + "").match(imgReg);
                 if (array) {
                     for (let i = 0; i < array.length; i++) {
-                        let src = array[i].match(srcReg);
+                        const src = array[i].match(srcReg);
-                        if(src[1]){
+                        const width = array[i].match(widthReg);
-                            imgs.push(src[1]);
+                        const height = array[i].match(heightReg);
+                        if(src){
+                            imgs.push({
+                                src: src[2],
+                                width: width ? width[1] : -1,
+                                height: height ? height[1] : -1,
+                            });
                         }
                     }
                 }

resources/assets/js/pages/manage/components/DialogView.vue

@@ -530,18 +530,18 @@ export default {
             const array = text.match(new RegExp(`<img[^>]*?>`, "g"));
             const list = [];
             if (array) {
-                const srcReg = new RegExp("src=\"(.*?)\""),
+                const srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"),
                     widthReg = new RegExp("(original-)?width=\"(\\d+)\""),
                     heightReg = new RegExp("(original-)?height=\"(\\d+)\"")
                 array.some(res => {
                     const srcMatch = res.match(srcReg),
                         widthMatch = res.match(widthReg),
                         heightMatch = res.match(heightReg);
-                    if (srcMatch && widthMatch && heightMatch) {
+                    if (srcMatch) {
                         list.push({
-                            src: srcMatch[1].replace(/\{\{RemoteURL\}\}/g, baseUrl),
+                            src: srcMatch[2].replace(/\{\{RemoteURL\}\}/g, baseUrl),
-                            width: widthMatch[2],
+                            width: widthMatch ? widthMatch[2] : -1,
-                            height: heightMatch[2],
+                            height: heightMatch ? heightMatch[2] : -1,
                         })
                     }
                 })

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -1269,10 +1269,20 @@ export default {
                 const index = list.findIndex(item => item.id === file.id);
                 if (index > -1) {
                     this.$store.state.previewImageIndex = index;
-                    this.$store.state.previewImageList = list.map(({path}) => path);
+                    this.$store.state.previewImageList = list.map(item => {
+                        return {
+                            src: item.path,
+                            width: item.width,
+                            height: item.height,
+                        }
+                    });
                 } else {
                     this.$store.state.previewImageIndex = 0;
-                    this.$store.state.previewImageList = [file.path];
+                    this.$store.state.previewImageList = [{
+                        src: file.path,
+                        width: file.width,
+                        height: file.height,
+                    }];
                 }
                 return
             }