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

问题场景

很多用户反馈动态图片为什么到我们网站上就不动了呢

相关阅读

解决思路

首先,我们需要定位问题

图片[1]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

图片[2]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

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

图片[3]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

我们可以看到代码如下

									    <?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文件

图片[4]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

可以看到核心代码如下

        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中的图片链接,之后使用替换的函数增加图片样式,实际效果如下,在原有图片后面增加的样式

图片[5]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

ChatGPT修改代码

首先我们需要提出需求

图片[6]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

图片[7]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

图片[8]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

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

图片[9]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog
图片[10]-使用ChatGPT修改WPOSS插件代码 | 新增判断 支持GIF图片加载-FancyPig's blog

当然,我们也把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;
        }
© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 共11条

请登录后发表评论