首页 > 其他分享 >Typora设置自定义脚本上传图片

Typora设置自定义脚本上传图片

时间:2024-07-23 16:33:36浏览次数:15  
标签:自定义 image Typora path 上传 图片

搭建图床服务

这里利用CloudFlare搭建免费的图床服务

cf-image-hosting

部署Pages

$ git clone https://github.com/ifyour/cf-image-hosting.git
$ cd cf-image-hosting
$ npm install && npm run deploy

部署成功后会显示如下信息

部署预览

设置自定义域名

点击左侧Workers和Pages ,选择cf-image-hosting

设置自定义域名

设置自定义域成功后则能在部署概览看到自定义的域名

域名列表

点击自定义域名后则能跳转到具体的上传图片页面

上传图片页面

至此,免费的图床服务搭建成功。

Typora自定义脚本上传图片

目前只在mac上做了验证。

官方文档说明

官方文档对自定义脚本有如下说明:

Typora自定义脚本

You could config a custom command to upload images, using tools that is not listed in above options, or even write your own tools / scripts. Typora will append all images that needs to be uploaded after the custom command you filled.

您可以使用上述选项中未列出的工具,甚至编写自己的工具/脚本,配置自定义命令来上传图片。Typora 会在你填写的自定义命令后追加所有需要上传的图片。

Then, Typora will fetch image urls from the last N lines of the standard output of your custom command. (N is the number of images to upload).

然后,Typora 会从自定义命令标准输出的最后 N 行中获取图片网址。(N 是要上传的图片数量)。

For example, if you write a tool upload-image.sh, then you can input [some path]/upload-image.sh in the command filed. Typora will call [some path]/upload-image.sh "image-path-1" "image-path-2" to upload two images located in image-path-1 and image-path-2. Then the command may return something like:

例如,如果你编写了一个工具 upload-image.sh ,那么你可以在命令文件中输入 [some path]/upload-image.sh 。Typora 将调用 [some path]/upload-image.sh "image-path-1" "image-path-2" 来上传位于 image-path-1image-path-2 中的两张图片。然后,命令可能会返回如下内容

Upload Success:
http://remote-image-1.png
http://remote-image-2.png

Then Typora will get the two remote image url from the output, and replace the original local images used in the Markdown document.

然后,Typora 将从输出中获取两个远程图片 url,并替换 Markdown 文档中使用的原始本地图片。

You could click the “Test Uploader” button to verify your custom commands.

您可以点击 "测试上传程序 "按钮来验证您的自定义命令。

编写脚本

  1. 赋予脚本执行权限:保存脚本后,需要给脚本赋予执行权限。在终端运行以下命令:

    chmod +x upload_image.sh
    
  2. 运行脚本:在终端中运行脚本,并传递多个图片路径作为参数。例如:

    ./upload_image.sh path/to/your/image1.jpg path/to/your/image2.jpg
    
脚本说明:
  1. 参数检查:检查是否传递了至少一个图片路径参数。如果没有传递参数,则打印用法信息并退出。
  2. 迭代处理每个图片文件:对每个传递的图片路径参数进行迭代处理。
  3. 文件检查:检查每个图片文件是否存在。如果文件不存在,则打印错误信息并继续处理下一个文件。
  4. 上传图片:使用curl命令将每个图片文件作为file参数上传到指定的API,并将响应存储在RESPONSE变量中。
  5. 解析响应:使用jq命令解析JSON响应并提取所有src参数的内容。如果jq解析失败,则打印错误信息并继续处理下一个文件。
  6. 打印结果:逐个打印成功上传后的每个src参数内容,即每张图片的URL。

这个脚本会处理每个传递的图片文件,上传后解析并打印每个图片的URL。对于每个图片,如果上传失败或解析失败,会打印相应的错误信息,并继续处理下一个图片文件。

脚本内容:
#!/bin/bash

# 自定义URL部分
base_url="https://img.itweeks.xyz"

# 检查是否安装了jq
if ! command -v jq &>/dev/null; then
    echo "Error: jq is not installed. Please install jq before running this script. "
    echo "You can install jq using the following command:"
    echo "brew install jq [macOS]"
    exit 1
fi

# 用于存储图片URL的数组
image_urls=()

# 循环读取参数
for file_path in "$@"; do
    # 发送上传图片请求,关闭curl输出
    response=$(curl --location --request POST "${base_url}/upload" \
        --header 'User-Agent: Apifox/1.0.0 (https://apifox.com)' \
        --form "file=@\"${file_path}\"" \
        --silent) # 添加 --silent 选项以关闭输出

    # 检查请求是否成功
    if [ $? -eq 0 ]; then
        # 解析返回的JSON并拼接图片URL
        img_url="${base_url}$(echo "$response" | jq -r '.[0].src')"

        # 存储图片URL到数组
        image_urls+=("${img_url}")
    else
        # 请求失败,输出错误信息并退出脚本
        echo "Upload Failed"
        exit 1
    fi
done

# 所有请求成功后输出成功信息
echo "Upload Success"

# 输出所有图片URL
for url in "${image_urls[@]}"; do
    echo "${url}"
done
调用示例:
~/soft /Users/mulyzhou/soft/upload-image.sh "/Applications/Typora.app/Contents/Resources/TypeMark/assets/icon/icon_512x512.png" "/Applications/Typora.app/Contents/Resources/TypeMark/assets/icon/icon_256x256.png"
https://image.itweeks.xyz/file/213fb10821a7758807733.png
https://image.itweeks.xyz/file/78332611766cef414f192.png

https://image.itweeks.xyz/file/213fb10821a7758807733.png

https://image.itweeks.xyz/file/78332611766cef414f192.png

这两行输出即是上传成功后回显图片的地址,一定要这样直接输出,中间不能输出别的信息,不然typora无法解析

Typora配置脚本

点击设置 - 图像 - 上传服务选择自定义命令 - 命令选择脚本路径 如/Users/mulyzhou/soft/upload-image.sh

Typora配置脚本

点击验证图片上传选项

验证成功示例

显示验证成功后则代表配置成功。

使用Telegraph-Image

使用上述方式部署后发现无法查看图片上传历史记录,这里采用另外一种部署方式。

Telegraph-Image

手把手教程

简单 3 步,即可部署本项目,拥有自己的图床

1.Fork 本仓库 (注意:必须使用 Git 或者 Wrangler 命令行工具部署后才能正常使用,文档)

2.打开 Cloudflare Dashboard,进入 Pages 管理页面,选择创建项目,选择连接到 Git 提供程序

连接Git

  1. 按照页面提示输入项目名称,选择需要连接的 git 仓库,点击部署站点即可完成部署

特性

1.无限图片储存数量,你可以上传不限数量的图片

2.无需购买服务器,托管于 Cloudflare 的网络上,当使用量不超过 Cloudflare 的免费额度时,完全免费

3.无需购买域名,可以使用 Cloudflare Pages 提供的*.pages.dev的免费二级域名,同时也支持绑定自定义域名

4.支持图片审查 API,可根据需要开启,开启后不良图片将自动屏蔽,不再加载

5.支持后台图片管理,可以对上传的图片进行在线预览,添加白名单,黑名单等操作

绑定自定义域名

在 pages 的自定义域里面,绑定 cloudflare 中存在的域名,在 cloudflare 托管的域名,自动会修改 dns 记录 自定义域名

开启图片审查

1.请前往https://moderatecontent.com/ 注册并获得一个免费的用于审查图像内容的 API key

2.打开 Cloudflare Pages 的管理页面,依次点击设置环境变量添加环境变量

3.添加一个变量名称ModerateContentApiKey为你刚刚第一步获得的API key,点击保存即可

注意:由于所做的更改将在下次部署时生效,你或许还需要进入部署页面,重新部署一下该本项目

开启图片审查后,因为审查需要时间,首次的图片加载将会变得缓慢,之后的图片加载由于存在缓存,并不会受到影响 图片审查环境变量设置

设置图片管理功能

1、支持图片管理功能,默认是关闭的,如需开启请部署完成后前往后台依次点击设置->函数->KV 命名空间绑定->编辑绑定->变量名称填写:img_url KV 命名空间 选择你提前创建好的 KV 储存空间,开启后访问 http(s)

标签:自定义,image,Typora,path,上传,图片
From: https://www.cnblogs.com/yunt/p/18318774

相关文章

  • 织梦dedecms自定义表单选项必填怎么修改?
    我们先在plus/diy.php文件中的的第40行下加上一下代码//增加必填字段判断if($required!=''){if(preg_match('/,/',$required)){$requireds=explode(',',$required);foreach($requiredsas$field){if($$field==''){......
  • 自定义全选框,当勾选√添加到selection中,再次勾选从selection中移除
    <el-table:data="tableData"ref="tableData"height="450px"class="customer-no-border-table":row-class-name="tableRowClassName":......
  • 为何生成静态页的时候或者上传附件过程中有报错:Maximum execution time of 30 seconds
    错误记录:为何生成静态页的时候或者上传附件过程中有报错:Maximumexecutiontimeof30secondsexceeded 解决方案:由于上传或者生成静态页的时候执行时间太久,超过服务器超时时间限制所致:请到服务器里面PHP配置修改下超时时间即可解决(修改后需重启服务或者服务器)具体方法为:......
  • Android开发 - ViewGroup解析与自定义
    ViewGroup解析ViewGroup是一个特殊的View,可以包含其他视图(称为子视图)。而ViewGroup是View的子类,所以ViewGroup可以当成普通的UI组件使用。ViewGroup是布局和视图容器的基类,该类还定义了ViewGroup.LayoutParams用作布局参数基类的类由于ViewGroup的直接子类和间接子类比较......
  • vue element-ui表格table 表格动态 添加行、删除行、添加列、删除列 自定义表头
       vuetable表格动态添加行、删除行、添加列、删除列自定义表头; 增加一行、删除一行、添加一列、删除一列;每行带输入框input代码1、HTML部分:<template><divclass="app-container"><el-table:data="tableData"borderstyle="width:600px;margin-top:2......
  • 有没有办法选择将数据框上传到 CSV 的哪个单元格/列,就像将数据抓取到 Excel 文件中一
    我有将网络数据抓取到Excel文件中的经验,并且我知道将数据复制到Excel电子表格中时,您可以选择将其复制到哪一列。(startcol=10如下面的代码片段所示)withpd.ExcelWriter("jockeyclub.xlsx",engine="openpyxl",mode='a',if_sheet_exists='overlay')aswriter:......
  • 将下载到本地的项目上传到自己的Git仓库中
    一、新建一个自己的Git仓库如果没有注册账号的朋友,可以先去注册一个Gitee的账号,用于管理自己的代码特别好用!!!接下来就是在gitee上新建一个自己的仓库,如下图所示:  点击【创建】按钮后,就会跳转到这个界面, 然后点击【初始化readme文件】,就可以生成如下图所示的文件,这样我们......
  • echarts的markline自定义起始位置和终点位置
    letmarkPoint=[10,20];markLine:{symbol:["none","none"],//去掉箭头silent:true,label:{show:true,formatter:"{b}",offset:[-......
  • 使用 minio 将文件上传到 s3 存储时出错
    我正在尝试上传两个文件。两者具有相同的扩展名,但其中一个比另一个小得多。一个只有100kb,另一个是100MB。扩展名为.bp,这些文件是机器学习模型的一部分。较小的文件已成功上传,没有任何问题。较大的文件给了我以下错误:InvalidXMLError:message:"Error"XMLisnotpar......
  • 错误:无法提取上传者 ID - Youtube、Discord.py
    我在不和谐(discord.py,PYTHON)中有一个非常强大的机器人,它可以在语音通道中播放音乐。它从youtube(youtube_dl)获取音乐。它之前工作得很好但现在它不想处理任何视频。我尝试更新youtube_dl但仍然不起作用我到处搜索,但仍然找不到可能对我有帮助的答案。这是错......