nodejs开发的使用github作为图库的图片oss

do_0b
8,730 阅读3分钟

nodejs开发的使用github作为图库的图片oss

一、介绍

经常用markdown写博客的coder肯定会遇到图片和图床的问题，而且在一定程度上也给大家造成过一定困扰。

所谓图床，其实可以就相当于我们手机上的相册，不过他是在线的，而且是对大家开放的，大家都可以访问查看，但是编辑删除这些功能仅限于拥有者，就相当于用百度云分享的公开照片，你可以查看，也可以下载下来编辑，但是拥有权还是属于分享者。

我们在写博客的时候，有很多图片需要插入，如果这些图片是保存在本地的，那么博客发表到网上，别人会看不到你博客内容的图片，因为你的图片都保存在本地。这个时候就凸显出图床的重要性。有了图床，我们在本地撰写好博客后，就能任意的复制到其他平台，而不用担心图片丢失的问题。

这篇文章就分享一个利用github搭建免费图床的教程。它是一个基于nodejs的服务，提供图片上传，图片加水印的功能。

二、准备工作

首先，既然是基于github的图床，那么你就需要拥有一个github账号。同时，由于本教程的代码使用nodejs写的，所以你也需要懂一点nodejs相关的知识。

三、搭建过程

1、新建一个仓库并发布

image-20221121202632339

在设置中发布仓库

image-20221121202656359

选择好分支以及根目录后就会生成一个地址，使用这个地址就能访问仓库中的静态内容了。注：选择的根目录下一定要有一个index.html文件，否则不会生成地址，也无法访问。

image-20221121202748550

2、创建github的token

image-20221121203153956

image-20221121203239244

按照 Settings => Developer settings => Personal access tokens => Tokens => Generate new token 的顺序创建一个token，注意它只会显示一次，所以你最好把它复制下来到你的备忘录存好，方便下次使用，否则下次有需要重新新建。

3、代码部分

/** /config.js  */
module.exports = {
  // 填写服务端运行的端口号
  server_port: "12818",
  // secret_token (客户端和服务端会同时添加secret_token鉴权，防止被他人滥用),随便设置，没有要求，请求时作为参数传递即可
  secret_token: "****",
  /** github上申请的token */
  github_token: "********",
  /** github仓库地址  https://api.github.com/repos/${账户名}/${仓库名}/contents/${文件名称以及地址}  */
  github_url: "https://api.github.com/repos/****/****/contents/",
  /** 提交人，提交邮箱 */
  committer: {
    name: "****",
    email: "****",
  },
};


/** /server/index.js   水印添加相关代码 */
function drawWatermark(path, option = {}) {
  const { scale = 0.3, wmPath } = option;
  var images = require("images");

  //水印图片,默认放在根目录下
  var watermarkImg = wmPath ? images(wmPath) : images("watermask.png");

  //等待加水印的图片
  var sourceImg = path ? images(path) : images("home.png");

  // 比如放置在右下角，先获取原图的尺寸和水印图片尺寸
  var sWidth = sourceImg.width();
  var sHeight = sourceImg.height();
  /** 设置水印缩放比例，默认0.3 */
  const w = sWidth * scale;
  watermarkImg.size(w, w / 2);

  var wmWidth = watermarkImg.width();
  var wmHeight = watermarkImg.height();

  const dirPath = "./server/assets/";
  mkdir(dirPath);

  //设置绘制的坐标位置，右下角距离 5px
  images(sourceImg)
    .draw(watermarkImg, sWidth - wmWidth - 5, sHeight - wmHeight - 5)
    //保存
    .save(`${dirPath}${path.replaceAll("\\", "/").split("/").pop()}`);
}

/** /server/index.js   推送到github相关代码 */
async function pushToGithub(base64, fileName) {
  return new Promise(async (resolve, reject) => {
    await request.put(
      {
        /** fileName可以根据仓库中的路径设置 */
        url: conf_info.github_url + fileName,
        headers: {
          "Content-Type": "text/plain",
          "User-Agent": "PostmanRuntime/7.29.2",
          /** 存放github上注册的token */
          Authorization: `token ${conf_info.github_token}`,
        },
        body: JSON.stringify({
          message: "upload file",
          committer: conf_info.committer,
          /** 上传的图片一定要提前转换成base64格式，否则不接收 */
          content: base64,
        }),
      },
      function optionalCallback(err, httpResponse, body) {
        if (err) {
          resolve("");
        } else {
          // 默认返回的是json字符串，需要自己序列化一下
          resolve(JSON.parse(body));
        }
      }
    );
  });
}

四、项目启动

# 安装依赖
yarn
# 开发模式启动
yarn dev 
# 生产环境启动（需要提前安装pm2）
yarn start

五、效果演示

tutieshi_640x334_40s

项目只提供接口服务，视频中前台服务不包含在内。

五、源码

Gitee源码 缺点：由于项目使用github作为图床，所以即使使用了加速cdn，在没有科学上网的环境下访问速度有一定限制～～～

avatar
文章
阅读
粉丝