Troublesome problem of image resizing when using typora to edit markdown to upload CSDN

One 、 Source of problem

When I write blog everyday , use first typora edit markdown file , And then in CSDN Of markdown Import... In the editor .md file . But use typora We all know that ,typora When zooming pictures in zoom attribute , However CSDN This property is not supported . Therefore, it is used in import typora Written .md When you file , stay CSDN When I watch it on, the picture is the first , And will not automatically center , So very uncomfortable .

typora The effect of directly pasting without changing the size of the picture ：

Two 、 Solution

Here I use python Regular matching is used to replace the corresponding url Content . After testing , Only need to .md File into the project project , function python After script , Put the new .md File copy to CSDN Then you can . The specific scheme is introduced below ：

（ One ） Create an engineering project

Use pycharm Create an engineering project , Create two folders under the project folder in and out.in Folders store pending .md file ,out The folder is the output folder ：

Of course , If you're using vscode Or other idle, Similar , The configuration is not complicated .

（ Two ） Code

Write code , Here I attach my own code , For reference only ：

import re

file_name = "Unity The core 8—— Model import .md"  #  The file name to be converted 
default_scale = 50  #  The default zoom percentage of the picture 
zoom_scale = 0.5  #  Adjust the original as a whole  typora  Medium  zoom  Property size 


#  Watermark related parameters 
watermark = "x-oss-process=image/watermark"  #  Add a picture or text watermark to the picture 
type = "ZHJvaWRzYW5zZmFsbGJhY2s"  #  Text watermark font （Base64 code ）
shadow = "50"  #  Specifies the shadow transparency of the text watermark 
text = "Q1NETiBAemhlbGlrdQ=="  #  Text watermark content （Base64 code ）
size = "20"  #  Text watermark size 
color = "FFFFFF"  #  Text watermark color 
t = "70"  #  Transparency of watermark image or watermark text 
g = "se"  #  Watermark location 

if_watermark = True  #  Whether to add watermark to the picture 


def generate_watermark():  #  The watermark is generated according to the above parameters 
    return f"?{
      watermark},type_{
      type},shadow_{
      shadow},text_{
      text},size_{
      size},color_{
      color},t_{
      t},g_{
      g}"


def alter(s):  #  Deal with pictures of unmodified size 
    return '<img src="' + s.group(2) + (
        generate_watermark() if if_watermark else "") + f'#pic_center" width="{
      default_scale}%">'


def alter_zoom(s):  #  Handle  typora  of use  zoom  Attribute to the image with modified size 
    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+]\()(.+)(\))")  #  Matching rules for pictures with unmodified size 
    pattern_zoom = re.compile(r'(<img src=".*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  #  with  zoom  The matching rule of the image of attribute 
    content = fin.read()  #  Read file contents 
    content1 = pattern.subn(alter, content)  #  First processing 
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  #  Second treatment 
    fout.write(content2[0])  #  Write new file 
    print(" Number of original image replacements ：", content1[1])
    print("zoom  Attribute image replacement times ：", content2[1])
    print(" Total number of replacements ：", content1[1] + content2[1])

About watermark parameters , What is not clear can be referred to This article

Here I divide the pictures into two kinds , One is to copy directly into typora Of , namely  This type of link image . The other is in typora Middle right click the modified size with zoom Attribute link image .

• For the first picture , The default zoom size after replacement is default_scale%;
• For the second , Originally, I wanted to keep the original zoom Property value , Directly replace with width attribute . Later, I thought about setting a zoom ratio zoom_scale. namely , The original picture size is zoom: 50% Pictures of the , After treatment, it becomes width: 50 * zoom_scale%

Of course, my picture link here is not local , I set up a cloud chart bed . If your picture link is a local link （ namely , Used assets Folder ）, So copy to CSDN The conversion may fail . I haven't tried local links here , Attach here typora The configuration tutorial of drawing bed

When the configuration is complete , take .md File put in in Folder , modify file_name, After running the script , Put... Directly out Newly generated in folder .md File copy to CSDN Of markdown The editor can . Just fine tune the size of the corresponding image . You can also modify the code and adjust the parameters by yourself ~

---

2022-06-30 to update

---

When uploading today , Discovery cannot be used directly zoom Property substitution width Percentage attribute of , The two properties are still different . Therefore, on the basis of the original code, the function of obtaining the image size is added , Set the picture size to a fixed value , The value is Original size * zoom Property value ：

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

file_name = "Unity The core 8—— Model import .md"  #  The file name to be converted 
scale = 0.6  #  The overall zoom ratio of the picture 

#  Watermark related parameters 
watermark = "x-oss-process=image/watermark"  #  Add a picture or text watermark to the picture 
type = "ZHJvaWRzYW5zZmFsbGJhY2s"  #  Text watermark font （Base64 code ）
shadow = "50"  #  Specifies the shadow transparency of the text watermark 
text = "Q1NETiBAemhlbGlrdQ=="  #  Text watermark content （Base64 code ）
size = "20"  #  Text watermark size 
color = "FFFFFF"  #  Text watermark color 
t = "70"  #  Transparency of watermark image or watermark text 
g = "se"  #  Watermark location 

if_watermark = True  #  Whether to add watermark to the picture 


def generate_watermark():  #  The watermark is generated according to the above parameters 
    return f"?{
      watermark},type_{
      type},shadow_{
      shadow},text_{
      text},size_{
      size},color_{
      color},t_{
      t},g_{
      g}"


def get_size(img_path):  #  Get the size of the picture according to the picture link 
    response = urllib.request.urlopen(img_path)
    temp_img = io.BytesIO(response.read())
    img = Image.open(temp_img)
    return img.size


def alter(s):  #  Deal with pictures of unmodified size 
    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):  #  Handle  typora  of use  zoom  Attribute to the image with modified size 
    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+]\()(.+)(\))")  #  Matching rules for pictures with unmodified size 
    pattern_zoom = re.compile(r'(<img src=")(.*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  #  with  zoom  The matching rule of the image of attribute 
    content = fin.read()  #  Read file contents 
    content1 = pattern.subn(alter, content)  #  First processing 
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  #  Second treatment 
    fout.write(content2[0])  #  Write new file 
    print(" Number of original image replacements ：", content1[1])
    print("zoom  Attribute image replacement times ：", content2[1])
    print(" Total number of replacements ：", content1[1] + content2[1])