V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
matthewzhong
V2EX  ›  分享创造

so easy...自制代码截图工具

  •  
  •   matthewzhong · 2021-06-25 00:17:04 +08:00 · 2624 次点击
    这是一个创建于 1255 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://mp.weixin.qq.com/s/N9Ft19hi7Ua2dL7xmrLLRg

    实现很简单,contentEditable +  html2canvas

    脏活累活都让 html2canvas.js 干完了,感谢它。

    希望能为你提供思路,定制属于自己的代码截图器。

    http://codeimg.mzh.ren/

    16 条回复    2021-06-25 20:36:50 +08:00
    wudicgi
        1
    wudicgi  
       2021-06-25 00:30:54 +08:00
    mzh.ren 是不是还没 mazhongren.com 打起来顺手
    also24
        2
    also24  
       2021-06-25 00:32:22 +08:00
    试着随便输入了几个字符…… 好像有点不太对……

    matthewzhong
        3
    matthewzhong  
    OP
       2021-06-25 00:48:23 +08:00 via Android
    @also24 哈哈,我这个直接输入是残废。从编辑器里拷贝一段代码,比较好
    matthewzhong
        4
    matthewzhong  
    OP
       2021-06-25 00:49:14 +08:00 via Android
    @wudicgi 是的,mzh.ren 让人感觉不知道什么意思
    yitingbai
        5
    yitingbai  
       2021-06-25 08:52:34 +08:00
    我最近看到好多个代码截图工具, 这类工具有什么作用吗?
    matthewzhong
        6
    matthewzhong  
    OP
       2021-06-25 09:58:32 +08:00 via Android
    @yitingbai 我最近也看到好多。就是代码截图,你还想用它来干啥?
    yitingbai
        7
    yitingbai  
       2021-06-25 10:23:01 +08:00
    @matthewzhong 我奇怪的是, 发代码给别人肯定是直接发文本啊, 难道别人还要再敲一遍? 如果是临时展示代码, 直接给代码截图不就行了吗, 有必要这么大费周折专门搞个工具嘛
    matthewzhong
        8
    matthewzhong  
    OP
       2021-06-25 10:56:02 +08:00
    @yitingbai 你说的对。

    现在文章中插入代码,普遍有三种形式:1,代码文本+高亮插件。2 codepen 或 gist 链接
    3 代码截图。

    ”如果是临时展示代码, 直接给代码截图不就行了吗“,工具可以让截图截得更漂亮,可以加入边框、标题、水印等,使信息更完整。

    最重要的一点,写这样一个小工具,只花一点时间,也不大费周折啊。
    cweijan
        9
    cweijan  
       2021-06-25 11:35:22 +08:00
    好家伙挺有趣的, 不过我比较好奇为什么网页能够直接读取复制的代码格式, 一模一样呢.
    cweijan
        10
    cweijan  
       2021-06-25 11:40:08 +08:00   ❤️ 1
    试了下, 原来是浏览器自己实现了.
    xudaolong
        11
    xudaolong  
       2021-06-25 15:46:45 +08:00
    使用 https://github.com/carbon-app/carbon 就可以了啊 我自己的工具执行实现
    https://s1.ax1x.com/2020/06/15/N9u2bq.gif
    matthewzhong
        12
    matthewzhong  
    OP
       2021-06-25 16:17:01 +08:00 via Android
    @xudaolong carbon 很不错,我也一直在用,美中不足是没水印
    Justfakemoz
        13
    Justfakemoz  
       2021-06-25 16:55:30 +08:00
    没水印是不足?那没广告也是不足???
    matthewzhong
        14
    matthewzhong  
    OP
       2021-06-25 17:40:46 +08:00 via Android
    @Justfakemoz 言重了,给图片加水印是很普遍的功能,跟广告不一样。

    carbon 这类工具另一个缺点是会丢失编辑器自带的样式。

    只能说对我来说,美中不足了
    liuzhihang
        15
    liuzhihang  
       2021-06-25 19:21:59 +08:00
    一直在用 https://carbon.now.sh/ 直接复制图片, 然后使用 uPic
    touchwithe
        16
    touchwithe  
       2021-06-25 20:36:50 +08:00 via iPhone
    @yitingbai #7 写 ppt 的时候挺有用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   937 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:56 · PVG 06:56 · LAX 14:56 · JFK 17:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.