打造一个外贸网站,不仅需要有吸引人的设计,更需要考虑用户的体验。我们的目标是从文案、设计、技术等多个维度出发,构建一个以用户体验为中心、以询盘为导向的营销型外贸网站。让您的客户在短时间内了解您的优势,快速询盘!
外贸网站建设 外贸独立站推广 跨境电商

PB上传图片转换成webp功能开发

时间:2025-06-15   来源:外贸网站建设

webp能将原图压缩30%左右还能保持清楚。所以正在被越来越多的人喜欢。

pb要增这个功能,第一步:找到ueditor中的Uploader.class.php,任意处添加函数。

   /**
 * 将图片转换为WebP格式
 */
private function convertToWebP()
{
    $originalFilePath = $this->filePath; // 保存原始文件路径
    $webpFilePath = preg_replace('/\\\\\\\\.(jpg|jpeg|png)$/i', '.webp', $this->filePath);
    $webpFullName = preg_replace('/\\\\\\\\.(jpg|jpeg|png)$/i', '.webp', $this->fullName);
    $webpFileName = preg_replace('/\\\\\\\\.(jpg|jpeg|png)$/i', '.webp', $this->fileName);

    if ($this->fileType === '.jpg' || $this->fileType === '.jpeg') {
        $image = imagecreatefromjpeg($this->filePath);
    } elseif ($this->fileType === '.png') {
        $image = imagecreatefrompng($this->filePath);
    } else {
        return false;
    }

    if ($image) 
        if (imagewebp($image, $webpFilePath)) {
            $this->filePath = $webpFilePath;
            $this->fullName = $webpFullName;
            $this->fileName = $webpFileName;
            $this->fileType = '.webp';
            $this->fileSize = filesize($webpFilePath);
            imagedestroy($image);
            unlink($originalFilePath); // 删除原始文件而不是WebP文件
            return true;
        }
        imagedestroy($image);
    }
    return false;
}

/**
 * 转换上传的图片为 WebP 格式(不影响原始文件)
 */


第二步:请找到如下代码(大概率出现在函数 handleFile()saveFile() 中):

找到:

$this->stateInfo = $this->stateMap[0];

后添加:

$this->convertToWebP(); // 上传成功后生成 .webp 副本

效果如:

$this->stateInfo = $this->stateMap[0];
$this->convertToWebP(); // 上传成功后生成 .webp 副本


第三步:funtion中的file.php中添加一个函数

// 添加一个新的函数用于转换图片为WebP格式
function convert_to_webp($src, $dest, $quality = 80)
{
    $info = getimagesize($src);
    $is_converted = false;
    switch ($info['mime']) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($src);
            $is_converted = imagewebp($image, $dest, $quality);
            imagedestroy($image);
            break;
        case 'image/gif':
            // 对于GIF文件,直接返回false,不进行WebP转换
            return false;
            break;
        case 'image/png':
            $image = imagecreatefrompng($src);
            $is_converted = imagewebp($image, $dest, $quality);
            imagedestroy($image);
            break;
        default:
            return false;
    }
    return $is_converted;
}


第四步:在// 处理并移动上传文件function handle_upload中的末尾找到并修改,

 // 如果是图片
    if (is_image($file_path)) {
        // 进行等比例缩放
        if (($reset = resize_img($file_path, $file_path, $max_width, $max_height)) !== true) {
            return $reset;
        }
        // 图片打水印
        if ($watermark) {
            watermark_img($file_path);
        }
    }
    return $save_file;


改成:


// 如果是图片
    if (is_image($file_path)) {
        // 进行等比例缩放
        if (($reset = resize_img($file_path, $file_path, $max_width, $max_height)) !== true) {
            return $reset;
        }
        // 图片打水印
        if ($watermark) {
            watermark_img($file_path);
        }

         // 转换为WebP格式
        $webp_path = preg_replace('/\\.\\w+$/', '.webp', $file_path);
        if (!convert_to_webp($file_path, $webp_path)) {
            // 如果转换失败,保留原始文件格式
            $webp_path = $file_path;
        } else {
            // 删除原始格式的图片文件
            if (file_exists($file_path)) {
                unlink($file_path);
            }
            $file_path = $webp_path;
        }
    }
     // 返回WebP格式的文件路径
    $save_file = str_replace(ROOT_PATH, '', $file_path); // 获取文件站点路径
    return $save_file;


Ok了,我们现在来测试一下上传图片。



TAG:
新闻推荐
网站后台增加自定义表单提醒功能。
网站后台增加自定义表单提醒功能。

我们的网站后台默认有一个留言的提醒数据:但是如果要有多个留言表单,那么我们自定义的留言表单却没有这个...

后台发布文章新增预览功能。
后台发布文章新增预览功能。

在之前的文章中,我们有讲过,如何使用扩展字段来此入HTML代码并添加预览功能。文章链接可查看:https://ww...

网站防攻击代码及服务器NGINX配置。
网站防攻击代码及服务器NGINX配置。

以下内容来源于PB交流QQ群。第一:NGINX配置。#拦截常见敏感后台路径访问(例如dede、admin、wp-login等),...

前端留言需要上传多个文件的时候,包括ZIP,PDF,DOC等不同格式文件
前端留言需要上传多个文件的时候,包括ZIP,PDF,DOC等不同格式文...

在外贸网站建设中,我们会遇到有客户说需要用户前端留言的时候可以上传自定义的文件或者图片等资料。那么这...

开启外贸时代,欢迎留言!
留言您的联系方式,我们会第一时间联系您!

Top