利用cf搭建imgur反代 支持评论图片自动上传

巧用worker解决简单问题

Typecho博客系统中的Sakura主题默认支持图片自动上传,但imgur默认访问有问题,故此设置一下完美支持imgur

原理分析

  • 利用Cloudflare的worker搭建imgur反代
  • 修改主题下相关文件
  • 后台进行主题设置 添加反代地址

搭建反代

  1. 进入 Cloudflare 的 worker 界面,创建一个新的,删掉默认代码,用以下代码部署
addEventListener("fetch", event => {
  let url = new URL(event.request.url);
  url.protocol = 'https:'
  <mark>url.hostname = "i.imgur.com";</mark>
  let request = new Request(url, event.request);
  event.respondWith(fetch(request));
})

将得到 https://foo.boo.workers.dev 的访问域名,到此将实现原本需要 https://i.imgur.com/Ch0lmFc.jpg 访问的变为只需要 https://foo.boo.workers.dev/Ch0lmFc.jpg 即可。

  1. 某些网络环境,workers.dev 域名支持不好,故此要绑定自定义个性化域名

在 worker 界面中的 Custom Domains,添加自定义域。你的 CF 账号下的任何一个域名都可以设置个二级子域名或三级,到此实现了 利用 https://yourdomain.name/Ch0lmFc.jpg

修改主题相关文件

文件路径 wp-contents/themes/sakura/inc/classes/Images.php 也可以在 wp 后台直接定位找到 对于 imgur 上传代码段进行小改动即可,上传逻辑和方法不变,只需要在最后生成的链接替换成我们搭建的反代域名链接 在这个上传接口代码块里面,找到上传成功后处理的代码,进行修改。

public function Imgur_API($image) {
    $upload_url = akina_option('imgur_upload_image_proxy');
    $args = array(
        'headers' => array(
            'Authorization' => 'Client-ID ' . $this->imgur_client_id,
        ),
        'body' => array(
            'image' => base64_encode($image),
        ),
    );

    $response = wp_remote_post($upload_url, $args);
    $reply = json_decode($response["body"]);

    if ($reply->success && $reply->status == 200) {
        $status = 200;
        $success = true;
        $message = "success";
        $link = $reply->data->link;
        $newlink = parse_url($link,PHP_URL_PATH);
        $proxy = akina_option('cmt_image_proxy') . $newlink;
    } else {
        $status = $reply->status;
        $success = false;
        $message = $reply->data->error;
        $link = 'https://view.moezx.cc/images/2019/10/28/default_d_h_large.gif';
        $proxy = akina_option('cmt_image_proxy') . $link;
    }
    $output = array(
        'status' => $status,
        'success' => $success,
        'message' => $message,
        'link' => $link,
        'proxy' => $proxy,
    );
    return $output;
}

利用 php 内置函数 parse_url 进行处理 简单复习一下,官方函数说明

parse_url(string $url, int $component = -1): int|string|array|null|false

本函数解析 URL 并返回关联数组,包含在 URL 中出现的各种组成部分。数组的元素值不会 URL 解码。本函数不是用来验证给定 URL 的有效性的,只是将其分解为下面列出的部分。也会接受不完整或无效的 URL,parse\_url() 会尝试尽量正确解析。

如以下代码

$url = 'http://username:password@hostname:9090/path?arg=value#anchor';
var_dump(parse_url($url));
var_dump(parse_url($url, PHP_URL_SCHEME));
var_dump(parse_url($url, PHP_URL_USER));
var_dump(parse_url($url, PHP_URL_PASS));
var_dump(parse_url($url, PHP_URL_HOST));
var_dump(parse_url($url, PHP_URL_PORT));
var_dump(parse_url($url, PHP_URL_PATH));
var_dump(parse_url($url, PHP_URL_QUERY));
var_dump(parse_url($url, PHP_URL_FRAGMENT));

将输出

array(8) {
  ["scheme"]=>
  string(4) "http"
  ["host"]=>
  string(8) "hostname"
  ["port"]=>
  int(9090)
  ["user"]=>
  string(8) "username"
  ["pass"]=>
  string(8) "password"
  ["path"]=>
  string(5) "/path"
  ["query"]=>
  string(9) "arg=value"
  ["fragment"]=>
  string(6) "anchor"
}
string(4) "http"
string(8) "username"
string(8) "password"
string(8) "hostname"
int(9090)
string(5) "/path"
string(9) "arg=value"
string(6) "anchor"

复习完拉。 这里只需要把上传成功的 url 中的 /path 提取出来,再与自定义反代域名拼接即可 处理过程: $newlink = parse_url($link,PHP_URL_PATH); = =$proxy = akina_option('cmt_image_proxy') . $newlink; 最后结果:

if ($reply->success && $reply->status == 200) {
    $status = 200;
    $success = true;
    $message = "success";
    $link = $reply->data->link;
    $newlink = parse_url($link,PHP_URL_PATH);
    $proxy = akina_option('cmt_image_proxy') . $newlink;
}

如图:

https://cdn.ooim.xyz/41fce1700d269e43fdd61707d9041bf2.png

填入主题设置中的反代地址

把自定义反代域名完整 url 填入,刷新即可

https://cdn.ooim.xyz/9fe7abaf9120fc569ea02ecb7d8d7155.pnghttps://cdn.ooim.xyz/9fe7abaf9120fc569ea02ecb7d8d7155.png

发表于 2023-11-28
JS
Arrow Up