使用Typora编辑markdown上传CSDN时图片大小调整麻烦问题

2023-10-30

一、问题来源

我日常写博客时,首先使用 typora 编辑 markdown 文件,然后在 CSDN 的 markdown 编辑器中导入 .md 文件。但是使用 typora 的小伙伴们都知道,typora 中缩放图片时使用的是 zoom 属性,然而 CSDN 并不支持这个属性。因此在导入用 typora 写好的 .md 文件时,在 CSDN 上观看时图片老大一个,并且不会自动居中,因此十分不爽。

typora中不改变图片大小后直接粘贴的效果:
image-20220629162157125

二、解决方案

这里我使用 python 正则匹配来替换所有图片对应的 url 内容。经过测试,只需要将 .md 文件放入项目工程中,运行 python 脚本后,把新生成的 .md 文件拷贝到 CSDN 中即可。下面介绍具体方案:

(一)创建工程项目

使用 pycharm 创建工程项目,在项目文件夹下创建两个文件夹 in 和 out。in 文件夹存储待处理的 .md 文件,out 文件夹为输出文件夹:
在这里插入图片描述
当然,如果你使用的是 vscode 或者其他 idle,类似即可,配置不复杂。

(二)代码

编写代码,这里我把我自己写的代码附上,仅供参考:

import re

file_name = "Unity核心8——模型导入.md"  # 需要转换的文件名
default_scale = 50  # 图片默认的缩放百分比
zoom_scale = 0.5  # 整体调整原来 typora 中的 zoom 属性大小


# 水印相关参数
watermark = "x-oss-process=image/watermark"  # 为图片添加图片或文字水印
type = "ZHJvaWRzYW5zZmFsbGJhY2s"  # 文字水印字体(Base64编码)
shadow = "50"  # 指定文字水印的阴影透明度
text = "Q1NETiBAemhlbGlrdQ=="  # 文字水印内容(Base64编码)
size = "20"  # 文字水印大小
color = "FFFFFF"  # 文字水印颜色
t = "70"  # 水印图片或水印文字的透明度
g = "se"  # 水印位置

if_watermark = True  # 是否为图片添加水印


def generate_watermark():  # 根据上述参数生成水印
    return f"?{watermark},type_{type},shadow_{shadow},text_{text},size_{size},color_{color},t_{t},g_{g}"


def alter(s):  # 处理未修改大小的图片
    return '<img src="' + s.group(2) + (
        generate_watermark() if if_watermark else "") + f'#pic_center" width="{default_scale}%">'


def alter_zoom(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    scale = zoom_scale * int(s.group(3))
    return s.group(1) + (generate_watermark() if if_watermark else "") + "#pic_center" + s.group(
        2) + f'width="{scale}%"' + s.group(4)


with open("./in/" + file_name, "r", encoding="utf-8") as fin, open("./out/" + file_name, "w", encoding="utf-8") as fout:
    pattern = re.compile(r"(!\[image-\d+]\()(.+)(\))")  # 未修改大小的图片的匹配规则
    pattern_zoom = re.compile(r'(<img src=".*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    content = fin.read()  # 读取文件内容
    content1 = pattern.subn(alter, content)  # 第一次处理
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  # 第二次处理
    fout.write(content2[0])  # 写入新文件
    print("原始图片替换次数:", content1[1])
    print("zoom 属性图片替换次数:", content2[1])
    print("总共替换次数:", content1[1] + content2[1])

关于水印参数部分,不清楚的可以参考 这篇文章

这里我将图片分为两种,一种是直接复制进 typora 的,即 ![…](…) 这种类型的链接图片。另一种是在 typora 中右键修改过大小的带有 zoom 属性的链接图片。

  • 对于第一种图片,替换后默认缩放大小为 default_scale%;
  • 对于第二种,原本是想保留原来的 zoom 属性值,直接替换为 width 属性。后来想想还是设置了一个缩放比例 zoom_scale。即,原来图片大小为 zoom: 50% 的图片,经过处理后变为 width: 50 * zoom_scale%

当然这里我的图片链接并不是本地的,我设置了云图床。如果你的图片链接是本地链接(即,使用了 assets 文件夹),那么复制到 CSDN 时可能转换失败。我这里没尝试过本地链接,在这里附上 typora 图床的配置教程

配置完成后,将 .md 文件放入 in 文件夹,修改 file_name,运行脚本后,直接把 out 文件夹中新生成的 .md 文件复制到 CSDN 的 markdown 编辑器即可。对应的图片大小自己微调就好。也可以自己修改代码调整参数自行配置~


2022-06-30 更新

今天上传时,发现并不能直接用 zoom 属性替换 width 的百分比属性,两个属性还是不一样的。因此在原来的代码基础上添加了获取图片大小的功能,将图片大小设置为固定值,该值为 原图大小 * zoom 属性值:

import io
import re
import urllib.request
from PIL import Image

file_name = "Unity核心8——模型导入.md"  # 需要转换的文件名
scale = 0.6  # 图片整体缩放比例

# 水印相关参数
watermark = "x-oss-process=image/watermark"  # 为图片添加图片或文字水印
type = "ZHJvaWRzYW5zZmFsbGJhY2s"  # 文字水印字体(Base64编码)
shadow = "50"  # 指定文字水印的阴影透明度
text = "Q1NETiBAemhlbGlrdQ=="  # 文字水印内容(Base64编码)
size = "20"  # 文字水印大小
color = "FFFFFF"  # 文字水印颜色
t = "70"  # 水印图片或水印文字的透明度
g = "se"  # 水印位置

if_watermark = True  # 是否为图片添加水印


def generate_watermark():  # 根据上述参数生成水印
    return f"?{watermark},type_{type},shadow_{shadow},text_{text},size_{size},color_{color},t_{t},g_{g}"


def get_size(img_path):  # 根据图片链接获取图片的大小
    response = urllib.request.urlopen(img_path)
    temp_img = io.BytesIO(response.read())
    img = Image.open(temp_img)
    return img.size


def alter(s):  # 处理未修改大小的图片
    w, h = get_size(s.group(2))
    new_w, new_h = int(scale * w), int(scale * h)
    return '<img src="' + s.group(2) + (
        generate_watermark() if if_watermark else "") + f'#pic_center" width="{new_w}" height="{new_h}">'


def alter_zoom(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    zoom_value = int(s.group(4)) / 100
    w, h = get_size(s.group(2))
    new_w, new_h = int(zoom_value * w), int(zoom_value * h)
    return s.group(1) + s.group(2) + (generate_watermark() if if_watermark else "") + "#pic_center" + s.group(
        3) + f'width="{new_w}" height="{new_h}"' + s.group(5)


with open("./in/" + file_name, "r", encoding="utf-8") as fin, open("./out/" + file_name, "w", encoding="utf-8") as fout:
    pattern = re.compile(r"(!\[image-\d+]\()(.+)(\))")  # 未修改大小的图片的匹配规则
    pattern_zoom = re.compile(r'(<img src=")(.*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    content = fin.read()  # 读取文件内容
    content1 = pattern.subn(alter, content)  # 第一次处理
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  # 第二次处理
    fout.write(content2[0])  # 写入新文件
    print("原始图片替换次数:", content1[1])
    print("zoom 属性图片替换次数:", content2[1])
    print("总共替换次数:", content1[1] + content2[1])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用Typora编辑markdown上传CSDN时图片大小调整麻烦问题 的相关文章

随机推荐

  • [转]Ubuntu自带的FTP服务器vsftpd技巧

    实现了Apache多用户的虚拟主机设置 那么一般这些用户都会选择用ftp上传的方式来管理自己的web内容 这就需要我们再为他们开设FTP服务 Ubuntu自带的FTP服务器是vsftpd 1 安装vsftpd Ubuntu安装软件倒不是件困
  • ag-gride-vue滚动条调整

    v deep ag layout normal overflow y overlay v deep ag theme alpine dark hover ag body horizontal scroll viewport margin r
  • Matlab中使用latex风格

    Matlab绘图时使用latex风格的符号和字体 往往能够使你的图形增色不少 在Matlab中 title text xlabel ylabel和legend均可使用latex风格的符号和字体 多说无益 直接上例子 title E 2 t
  • php参考文献外文文献,web of science怎么导出参考文献

    web of science导出参考文献的方法 首先登录web of Science网站 选择文献 然后选中所需要的文献 点击页面上方中间 保存至Endnote online 旁边的下拉箭头 选择保存位置即可 本文操作环境 Windows7
  • 通过apply进行数据预处理

    数据准备 这里我事先下载了一个csv文件 其中包含两列 时间戳和字符串 大小为近8000行 使用apply进行预处理 apply可以批量的改变dataframe中的数据 经过上边的处理 在df中添加了一列 全部都是a 将A列改的值为大写 a
  • 写给Android开发者的性能优化指南(Android 性能优化的方面方面都在这儿)

    众所周知 一个好的产品 除了功能强大 好的性能也必不可少 有调查显示 近90 的受访者会因为APP性能差而卸载 性能也是造成APP用户沮丧的头号原因 而且随着产品的更新迭代 功能的越发复杂 UI页面的越发丰富 性能问题变得更加严重 说实话要
  • 推荐系统-基于物品的协同过滤(Item-based CF)

    今天我们来聊一聊基于物品的协同过滤即Item based CF方法 有了上一篇的经验 你可能很容易就想到Item based CF就是通过计算物品之间的相似度 然后用户曾与那些商品发生过交互 给他推荐与这些商品最接近的东西给他 这样做有什么
  • 毕业设计-基于机器学习的软件漏洞挖掘方法

    目录 前言 课题背景和意义 实现技术思路 一 基于机器学习的软件漏洞挖掘流程 二 代码的表征形式 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近
  • getopts 可选参数_linux shell命令行选项与参数用法详解--getopt

    本文介绍了linux shell中使用命令行选项与命令行参数的方法 在bash中 可以用以下三种方式来处理命令 行参数 每种方式都有自己的应用场景 问题描述 在linux shell中如何处理tail n 10 access log这样的命
  • gsoap学习笔记一

    本文章是对gsoap中生成的cpp类型的代码框架的应用 因为要实现一些ONVIF规范中的一些功能 所以选择了gsoap生成代码框架 但是发现好多博客上都是生成的C的代码框架 使用起来很麻烦 而且引用插件功能的时候 什么时候需要修改文件内容
  • Vue各种标签的使用方法

    1 内容绑定 事件绑定 v text v html v on 1 v text 绑定内容 作用 设置标签的内容 无论内容是什么 它只会解析文本 div style color red h2 h2 h1 h1 div
  • RuoYi框架微服务版本(windows环境)二次开发环境搭建详解【小白版】

    1 需要准备的依赖环境服务 JDK gt 1 8 推荐1 8版本 Mysql gt 5 7 0 推荐5 7版本 Redis gt 3 0 Maven gt 3 0 NodeJS gt 10 以上安装配置不赘述 nacos gt 1 1 0
  • 基于Smack3.0.4+ Openfire3.10.2开发之Android 客户端之二

    我们在之前依次介绍openfire部署以及smack常用API的使用 这一节中我们着力介绍如何基于asmack开发一个Android的客户端 本篇的重点在实践 讲解和原理环节 大家可以参考前面我所发布的OpenFire和Smack的相关文章
  • FLOPS的计算

    参考 https blog csdn net qq 42309265 article details 123098538 概念 FLOPS 浮点运算数 是floating point operations per second的缩写 意指每
  • C51子函数

    子函数 将完成某一种功能的程序代码单独抽取出来形成一个模块 在其它函数中可以随时调用此模块 以达到代码的复用和优化程序结构的目的 void Function unsigned char x 返回值 函数名 形参 函数体
  • 爬虫的异常处理办法

    爬虫是一种自动化程序 用于从互联网上收集数据 然而 由于互联网的不确定性和复杂性 爬虫程序可能会遇到各种异常情况 这些异常情况可能会导致爬虫程序停止工作或者收集到错误的数据 因此 异常处理是爬虫程序开发中非常重要的一部分 本文将介绍爬虫程序
  • mysql视图总结

    1 概述 视图是指计算机数据库中的视图 是一个虚拟表 其内容由查询定义 同真实的表一样 视图包含一系列带有名称的列和行数据 但是 视图并不在数据库中以存储的数据值集形式存在 行和列数据来自由定义视图的查询所引用的表 并且在引用视图时动态生成
  • au人声处理_如何消去人声保留伴奏?

    因为有做混剪视频 经常需要把声音和背景音乐分离 所以我尝试过很多的办法 下面分享2种我觉得分离效果还行的方法 PS 先声明 目前技术只能优化声音 音乐分离 还不能完成剥离 所以人声和音乐分离后 音质肯定会有些许的损失 01 Au中置声道提取
  • 一个小时内学习SQLite数据库

    1 介绍 SQLite 是一个开源的嵌入式关系数据库 实现自包容 零配置 支持事务的SQL数据库引擎 其特点是高度便携 使用方便 结构紧凑 高效 可靠 与其他数据库管理系统不同 SQLite 的安装和运行非常简单 在大多数情况下 只要确保S
  • 使用Typora编辑markdown上传CSDN时图片大小调整麻烦问题

    文章目录 一 问题来源 二 解决方案 一 创建工程项目 二 代码 一 问题来源 我日常写博客时 首先使用 typora 编辑 markdown 文件 然后在 CSDN 的 markdown 编辑器中导入 md 文件 但是使用 typora