小薛教你使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载

问题场景

很多用户反馈动态图片为什么到我们网站上就不动了呢？接下来这篇文章可能对您有帮助，接下来小薛将教程安排出来供大家参考！

解决思路

首先，我们需要定位问题

我们是在选择模式中，选择的自定义规则，规则是阿里云OSS的图片处理那边打的水印

动图为什么不能加载呢，因为水印打上去之后，就只能加载一帧了 。所以如果要修复这个问题，我们需要对WPOSS插件的自定义规则进行优化，让它不对GIF图片增加样式，就可以解决这个问题。

因此，我们下载WPOSS插件的代码，导入vscode，先定位代码位置

我们可以看到代码如下

                      <?php
                          if (!isset($this->options['opt']['img_process']['style_value'])
                              or $this->options['opt']['img_process']['style_value'] === $this->image_display_default_value
                              or $this->options['opt']['img_process']['style_value'] === '') {
                            
                              echo '<label class="layui-form-label">选择模式</label>
                                <div class="layui-input-block">
                                <input lay-filter="choice" name="img_process_style_choice" type="radio" value="0" checked="TRUE"  title="webp压缩图片" > 
                              </div>
                           <div class="layui-input-block">
                              <input lay-filter="choice" name="img_process_style_choice" type="radio" value="1"  title="自定义规则">
                           </div>
                            <div class="layui-input-block" >
                              <input class="layui-input" style="margin-left:65px;"
                                      name="img_process_style_customize" type="text" id="rss_rule" placeholder="请填写自定义规则" 
                                      value="" disabled="disabled">';
                          } else {
                              echo '<label class="layui-form-label">选择模式</label>
                            <div class="layui-input-block">
                               <input lay-filter="choice" name="img_process_style_choice" type="radio" value="0"  title="webp压缩图片" > 
                            </div>
                            <div class="layui-input-block">
                               <input lay-filter="choice" name="img_process_style_choice" type="radio" value="1" checked="TRUE"   title="自定义规则">
                            </div>
                            <div class="layui-input-block" >
                            <input class="layui-input" style="margin-left:65px;"
                                    name="img_process_style_customize" type="text" id="rss_rule" placeholder="请填写自定义规则" 
                                    value="' . $this->options['opt']['img_process']['style_value'] . '" >';
                       
                          }
                      ?>

我们可以看到自定义规则应该是这个变量存储并传输的

$this->options['opt']['img_process']['style_value']

因此我们继续搜索这个变量，Setting.php文件不用看了，因为是设置使用的。因此我们现在重点关注index.php文件

可以看到核心代码如下

        public function image_display_processing($content){
            if ( isset($this->options['opt']['img_process'])
                && $this->options['opt']['img_process']['switch'] ) {
                $media_url = get_option('upload_url_path');
                $pattern = '#<img[\s\S]*?src\s*=\s*[\"|\'](.*?)[\"|\'][\s\S]*?>#ims';  // img匹配正则
                $content = preg_replace_callback(
                    $pattern,
                    function($matches) use ($media_url) {
                        if (strpos($matches[1], $media_url) === false) {
                            return $matches[0];
                        } else {
                            return str_replace(
                                $matches[1],
                                $matches[1] . $this->image_display_default_tab . $this->options['opt']['img_process']['style_value'],
                                $matches[0]);
                        }
                    },
                    $content);
            }
            return $content;
        }

大概思路应该是先用正则表达式匹配了img标签，然后提取src中的图片链接，之后使用替换的函数增加图片样式，实际效果如下，在原有图片后面增加的样式

接下来我们进入提需求，获得代码的环节

ChatGPT修改代码

首先我们需要提出需求

然后看看AI是怎么回答的吧

可以看到在代码中增加了以下内容，对图片后缀使用pathinfo进行了判断

这样动图就不加样式了，因此，动图又可以动起来了，而且是可以直接在页面动起来

当然，我们也把AI生成的代码放到最后吧

修改的代码

wposs/index.php文件中，第401行，将下面代码

        public function image_display_processing($content){
            if ( isset($this->options['opt']['img_process'])
                && $this->options['opt']['img_process']['switch'] ) {
                $media_url = get_option('upload_url_path');
                $pattern = '#<img[\s\S]*?src\s*=\s*[\"|\'](.*?)[\"|\'][\s\S]*?>#ims';  // img匹配正则
                $content = preg_replace_callback(
                    $pattern,
                    function($matches) use ($media_url) {
                        if (strpos($matches[1], $media_url) === false) {
                            return $matches[0];
                        } else {
                            return str_replace(
                                $matches[1],
                                $matches[1] . $this->image_display_default_tab . $this->options['opt']['img_process']['style_value'],
                                $matches[0]);
                        }
                    },
                    $content);
            }
            return $content;
        }

修改为

        public function image_display_processing($content){
            if ( isset($this->options['opt']['img_process'])
                && $this->options['opt']['img_process']['switch'] ) {
                $media_url = get_option('upload_url_path');
                $pattern = '#<img[\s\S]*?src\s*=\s*[\"|\'](.*?)[\"|\'][\s\S]*?>#ims';  // img匹配正则
                $content = preg_replace_callback(
                    $pattern,
                    function($matches) use ($media_url) {
                        if (strpos($matches[1], $media_url) === false) {
                            return $matches[0];
                        } else {
                            $ext = pathinfo($matches[1], PATHINFO_EXTENSION);
                            if ($ext == 'gif') {
                                return $matches[0];
                            } else {
                                return str_replace(
                                    $matches[1],
                                    $matches[1] . $this->image_display_default_tab . $this->options['opt']['img_process']['style_value'],
                                    $matches[0]);
                            }
                        }
                    },
                    $content);
            }
            return $content;
        }