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

[matthewzhong]

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

实现很简单，contentEditable +　 html2canvas

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

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

http://codeimg.mzh.ren/

[wudicgi]

mzh.ren 是不是还没 mazhongren.com 打起来顺手

[also24]

试着随便输入了几个字符…… 好像有点不太对……

[matthewzhong]

@also24 哈哈，我这个直接输入是残废。从编辑器里拷贝一段代码，比较好

[matthewzhong]

@wudicgi 是的，mzh.ren 让人感觉不知道什么意思

[yitingbai]

我最近看到好多个代码截图工具, 这类工具有什么作用吗?

[matthewzhong]

@yitingbai 我最近也看到好多。就是代码截图，你还想用它来干啥？

[yitingbai]

@matthewzhong 我奇怪的是, 发代码给别人肯定是直接发文本啊, 难道别人还要再敲一遍? 如果是临时展示代码, 直接给代码截图不就行了吗, 有必要这么大费周折专门搞个工具嘛

[matthewzhong]

@yitingbai 你说的对。

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

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

最重要的一点，写这样一个小工具，只花一点时间，也不大费周折啊。

[cweijan]

好家伙挺有趣的, 不过我比较好奇为什么网页能够直接读取复制的代码格式, 一模一样呢.

[cweijan]

试了下, 原来是浏览器自己实现了.

[xudaolong]

使用 https://github.com/carbon-app/carbon 就可以了啊 我自己的工具执行实现
https://s1.ax1x.com/2020/06/15/N9u2bq.gif

[matthewzhong]

@xudaolong carbon 很不错，我也一直在用，美中不足是没水印

[Justfakemoz]

没水印是不足？那没广告也是不足？？？

[matthewzhong]

@Justfakemoz 言重了，给图片加水印是很普遍的功能，跟广告不一样。

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

只能说对我来说，美中不足了

[liuzhihang]

一直在用 https://carbon.now.sh/ 直接复制图片， 然后使用 uPic

[touchwithe]

@yitingbai #7 写 ppt 的时候挺有用