Serv00上搭建一个 PixPro 若梦图床 + 接入Cloudflare R2

东方月初2024-09-102024-11-23

Serv00上搭建一个PixPro图床,内存太小,我们可以接入到CFR2 足够个人使用。自己有VPS的也可在宝塔上面部署

面板页

后台页

友情提示使用Serv00搭建的好像不支持PNG格式上传上传后会显示空白不显示图片

Serv00图床 `PNG上传空白` 解决办法复制以下代码替换到 `config/image_processing.php`

<?php
/**
 * 将JPEG图片转换为WebP格式
 */
function convertToWebp($source, $destination, $quality = 60) {
    $info = getimagesize($source);

    if ($info['mime'] == 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] == 'image/gif') {
        return false;
    } else {
        return false;
    }
    $width = imagesx($image);
    $height = imagesy($image);
    $maxWidth = 2500;
    $maxHeight = 1600;
    if ($width > $maxWidth || $height > $maxHeight) {
        $ratio = min($maxWidth / $width, $maxHeight / $height);
        $newWidth = round($width * $ratio);
        $newHeight = round($height * $ratio);
        $newImage = imagecreatetruecolor($newWidth, $newHeight);
        imagecopyresampled($newImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
        imagedestroy($image);
        $image = $newImage;
    }
    $result = imagewebp($image, $destination, $quality);
    imagedestroy($image);
    gc_collect_cycles();
    return $result;
}

/**
 * 使用Imagick将PNG图片转换为WebP格式
 */
function convertPngWithImagick($source, $destination, $quality = 60) {
    try {
        $image = new Imagick($source);

        // 检查是否包含透明通道
        if ($image->getImageAlphaChannel()) {
            // 设置背景颜色为透明
            $image->setImageBackgroundColor(new ImagickPixel('transparent'));
            $image->setImageAlphaChannel(Imagick::ALPHACHANNEL_ACTIVATE);
            $image = $image->mergeImageLayers(Imagick::LAYERMETHOD_FLATTEN);
        }

        $image->setImageFormat('webp');
        $image->setImageCompressionQuality($quality);

        $width = $image->getImageWidth();
        $height = $image->getImageHeight();
        $maxWidth = 2500;
        $maxHeight = 1600;

        if ($width > $maxWidth || $height > $maxHeight) {
            $ratio = min($maxWidth / $width, $maxHeight / $height);
            $newWidth = round($width * $ratio);
            $newHeight = round($height * $ratio);
            $image->resizeImage($newWidth, $newHeight, Imagick::FILTER_LANCZOS, 1);
        }

        $result = $image->writeImage($destination);
        $image->clear();
        $image->destroy();
        return $result;
    } catch (Exception $e) {
        logMessage('Imagick转换PNG失败: ' . $e->getMessage());
        return false;
    }
}

/**
 * 使用Imagick将GIF图片转换为WebP格式
 */
function convertGifToWebp($source, $destination, $quality = 60) {
    try {
        $image = new Imagick();
        $image->readImage($source);
        $image = $image->coalesceImages();
        foreach ($image as $frame) {
            $frame->setImageFormat('webp');
            $frame->setImageCompressionQuality($quality);
        }
        $image = $image->optimizeImageLayers();
        $result = $image->writeImages($destination, true);
        $image->clear();
        $image->destroy();
        return $result;
    } catch (Exception $e) {
        logMessage('GIF转换WebP失败: ' . $e->getMessage());
        return false;
    }
}

/**
 * 处理图片压缩
 */
function processImageCompression($fileMimeType, $newFilePath, $newFilePathWithoutExt, $quality) {
    $convertSuccess = true;
    $finalFilePath = $newFilePath;

    if ($fileMimeType === 'image/png') {
        $convertSuccess = convertPngWithImagick($newFilePath, $newFilePathWithoutExt . '.webp', $quality);
        if ($convertSuccess) {
            $finalFilePath = $newFilePathWithoutExt . '.webp';
            unlink($newFilePath);
        }
    } elseif ($fileMimeType === 'image/gif') {
        $convertSuccess = convertGifToWebp($newFilePath, $newFilePathWithoutExt . '.webp', $quality);
        if ($convertSuccess) {
            $finalFilePath = $newFilePathWithoutExt . '.webp';
            unlink($newFilePath);
        }
    } elseif ($fileMimeType !== 'image/webp' && $fileMimeType !== 'image/svg+xml') {
        $convertSuccess = convertToWebp($newFilePath, $newFilePathWithoutExt . '.webp', $quality);
        if ($convertSuccess) {
            $finalFilePath = $newFilePathWithoutExt . '.webp';
            unlink($newFilePath);
        }
    }

    return [$convertSuccess, $finalFilePath];
}
?>

也可下载 PixPin 截图软件试试

安装前准备

Serv00账号注册

Github,PixPro项目地址

安装步骤

注册好Serv00账号打开网页进入到面板端添加域名或者用自己的域名都行，这里我用别的网站注册的二级域名。如下图添加

把里面的A记录解析你托管到CF的域名或者别的地方申请的

按照下图打开域名的权限

点击Save等待成功

创建MySQL数据库（保存账号及地址）

下载ZIP文件
上传安装包并解压进入文件管理器

进入public_html文件夹删除其下所有文件

上传安装包到你添加的域名或者Serv00自带域名下

选择你们下载文件的路径上传好如下图

和上一步一样

进去后如下图所以我们Shift建一直按着然后点击鼠标左键全选

移动到我们开始创建域名目录下的public_html

修改PHP版本在域名目录下创建一个文本，名为：.htaccess

添加PHP版本

选择Text Editor 添加以下代码

1	AddType application/x-httpd-php81 .php

访问你的域名开始安装系统，管理员账户和密码自己设置，如果要接入CFR2我们存储选择 S3 下面我会写S3安装方式

点击回到首页就可以上传图片了

接入R2 前提已开通 Cloudflare R2

进入到 Cloudflare 面板找到 R2 右边有一个管理 R2API 令牌点击创建 API令牌，创建好后里面有我们需要的访问密钥和机密访问密钥

1. 进入到 Cloudflare 面板找到 R2 点击创建存储桶

2. 进入后名称随便写。位置选择亚太地区后点击创建存储桶

3. 创建好后点击设置拉到下面看到 R2.dev 子域点击后面的允许访问，连接域需要添加你托管到CF上面域名

4. 14 步我们安装选择`S3`后看到下图

参数	值
S3 Region	auto
S3 Bucket	你的存储桶名称
S3 Endpoint	你的S3API 后面不要加你的存储桶名称
S3 Access Key ID	R2API令牌访问密钥
S3 Access Key Secret	R2API令牌机密访问密钥
S3 自定义域名	R2.dev 添加的自定义域或 R2 分配的域名