一键将图片的内容生成源码

最近在浏览网页时，看到一些比较实用的功能，会想拿来放在自己网站使用！但直接通过查看网页源码方式，会发源码内容现很多都是加了一大串js和调用关系，这些源码直接放入html会报一堆错，根本无法使用！
今天要分享的是一款一键将图片生成代码的神器：Screenshot to Code，只需要上传一张截图，它便能根据截图生成和它一样UI界面的源代码！而且还免费的！

一键将图片生成源代码步骤

该工具目前是在github上开源的，截止目前已经拥有高达55k的stars，可见该项目还是非常实用受欢迎的！目前想使用这款工具可以使用它的在线版或者本地版，本地版放在后面讲如何搭建，先来说下在线版如何使用！

在线版使用方式

1、在线版地址

官网地址：https://screenshottocode.com/
打开后进入界面如下（友情提示，这个页面打开要开魔法，不知道怎么开的去我的AI工具：https://ai.quanyouhulian.com/ 里面应用中心看攻略！）

2、登录在线版

使用github或者google账号可以直接登录，默认会自动注册

登录后会进到以下界面

3、设置输出代码内容格式和AI模型选择

目前输出的前端代码类型包括：html、react、bootstrap、vue、ionic，基本把当前主流框架全部支持了

AI模型目前只要是Claude和GPT，我比较喜欢用GPT-4o，识别图片内容精准而且生成内容页挺快的

接下来就需要配置自己的OpenAI API key或者Anthropic API key了

如果没有这两个key的也没关系，你可以用它订阅版的，直接点击绿色按钮就可以进到订阅界面

订阅版的有点小贵，建议还是直接用自己OpenAI API key，没有的话可以自己去创建个，创建方法也简单，可以自己去google搜索，这里不作细讲！

4、根据图片生成代码

操作也很简单，把图片拖到灰色区域，就会自动开始代码生成

以下是我上传的图片

不到1分钟时间，AI便可快速生成对应代码

还可以实时查看手机展示效果

以下是根据我上传图片生成的代码

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-4xl mx-auto p-4">
        <div class="bg-white p-4 rounded shadow">
            <div class="text-gray-600 text-sm mb-4">
                <a href="#" class="text-blue-500">首页</a> / 每日分享
            </div>
            <div class="space-y-4">
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-31</div>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>彩视app 链接：<a href="https://pan.quark.cn/s/1d6e1c2ba2c8" class="text-blue-500">https://pan.quark.cn/s/1d6e1c2ba2c8</a></li>
                        <li>职场高手的12堂工作汇报术【课程】【视频】 链接：<a href="https://pan.quark.cn/s/5e3c0d88fc78" class="text-blue-500">https://pan.quark.cn/s/5e3c0d88fc78</a></li>
                        <li>PPT快速入门100例：创意出众的100节PPT 链接：<a href="https://pan.quark.cn/s/76093e8c3eb" class="text-blue-500">https://pan.quark.cn/s/76093e8c3eb</a></li>
                        <li>【法考】罗翔：刑法学七讲 链接：<a href="https://pan.quark.cn/s/613cf5cec84d" class="text-blue-500">https://pan.quark.cn/s/613cf5cec84d</a></li>
                        <li>初中视频全集144集 链接：<a href="https://pan.quark.cn/s/c05c42165d8" class="text-blue-500">https://pan.quark.cn/s/c05c42165d8</a></li>
                        <li>好物分享零基础30天打卡训练营，账号定位，剪辑，选品，小店，千川 链接：<a href="https://pan.quark.cn/s/e9249e7b18f" class="text-blue-500">https://pan.quark.cn/s/e9249e7b18f</a></li>
                        <li>拿来就打的课宝全套合集 链接：<a href="https://pan.quark.cn/s/0eb21bbc1ff1" class="text-blue-500">https://pan.quark.cn/s/0eb21bbc1ff1</a></li>
                        <li>口袋素描app 链接：<a href="https://pan.quark.cn/s/06ca0323bd3d" class="text-blue-500">https://pan.quark.cn/s/06ca0323bd3d</a></li>
                        <li>小程序游戏入门课程 链接：<a href="https://pan.quark.cn/s/b88ef2a1e1c7" class="text-blue-500">https://pan.quark.cn/s/b88ef2a1e1c7</a></li>
                        <li>手把手的商铺实操，抖音电商商铺这个大好物推荐，短视频带货实操小店随心推（80节完整） 链接：<a href="https://pan.quark.cn/s/41371fc902b9" class="text-blue-500">https://pan.quark.cn/s/41371fc902b9</a></li>
                        <li>《考研考证备考有名专业思维导图汇总》 链接：<a href="https://pan.quark.cn/s/378ccfff647e" class="text-blue-500">https://pan.quark.cn/s/378ccfff647e</a></li>
                    </ul>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-30</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-28</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-27</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-26</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-25</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-24</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-23</div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2">2024-07-22</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

生成的图片样式有点不满意，接下来，我需要根据当前图片继续做改动，直接在左侧继续输入优化描述词

输入完成后，点击Update，不到10秒就重新生成新代码

生成完毕，新样式根据我的要求，对日期做了个控件，点击时会自动展开
看下新生成的html源码，可以看到新引入了jquery-3.6.0.min.js，并增加了属性函数绑定

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".toggle-content").hide();
            $(".toggle-header").click(function() {
                $(this).next(".toggle-content").slideToggle();
            });
        });
    </script>
</head>
<body class="bg-gray-100">
    <div class="max-w-4xl mx-auto p-4">
        <div class="bg-white p-4 rounded shadow">
            <div class="text-gray-600 text-sm mb-4">
                <a href="#" class="text-blue-500">首页</a> / 每日分享
            </div>
            <div class="space-y-4">
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-31</div>
                    <div class="toggle-content">
                        <ul class="list-disc pl-5 space-y-2">
                            <li>彩视app 链接：<a href="https://pan.quark.cn/s/1d6e1c2ba2c8" class="text-blue-500">https://pan.quark.cn/s/1d6e1c2ba2c8</a></li>
                            <li>职场高手的12堂工作汇报术【课程】【视频】 链接：<a href="https://pan.quark.cn/s/5e3c0d88fc78" class="text-blue-500">https://pan.quark.cn/s/5e3c0d88fc78</a></li>
                            <li>PPT快速入门100例：创意出众的100节PPT 链接：<a href="https://pan.quark.cn/s/76093e8c3eb" class="text-blue-500">https://pan.quark.cn/s/76093e8c3eb</a></li>
                            <li>【法考】罗翔：刑法学七讲 链接：<a href="https://pan.quark.cn/s/613cf5cec84d" class="text-blue-500">https://pan.quark.cn/s/613cf5cec84d</a></li>
                            <li>初中视频全集144集 链接：<a href="https://pan.quark.cn/s/c05c42165d8" class="text-blue-500">https://pan.quark.cn/s/c05c42165d8</a></li>
                            <li>好物分享零基础30天打卡训练营，账号定位，剪辑，选品，小店，千川 链接：<a href="https://pan.quark.cn/s/e9249e7b18f" class="text-blue-500">https://pan.quark.cn/s/e9249e7b18f</a></li>
                            <li>拿来就打的课宝全套合集 链接：<a href="https://pan.quark.cn/s/0eb21bbc1ff1" class="text-blue-500">https://pan.quark.cn/s/0eb21bbc1ff1</a></li>
                            <li>口袋素描app 链接：<a href="https://pan.quark.cn/s/06ca0323bd3d" class="text-blue-500">https://pan.quark.cn/s/06ca0323bd3d</a></li>
                            <li>小程序游戏入门课程 链接：<a href="https://pan.quark.cn/s/b88ef2a1e1c7" class="text-blue-500">https://pan.quark.cn/s/b88ef2a1e1c7</a></li>
                            <li>手把手的商铺实操，抖音电商商铺这个大好物推荐，短视频带货实操小店随心推（80节完整） 链接：<a href="https://pan.quark.cn/s/41371fc902b9" class="text-blue-500">https://pan.quark.cn/s/41371fc902b9</a></li>
                            <li>《考研考证备考有名专业思维导图汇总》 链接：<a href="https://pan.quark.cn/s/378ccfff647e" class="text-blue-500">https://pan.quark.cn/s/378ccfff647e</a></li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-30</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-28</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-27</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-26</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-25</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-24</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-23</div>
                    <div class="toggle-content"></div>
                </div>
                <div>
                    <div class="text-lg font-bold mb-2 toggle-header cursor-pointer">2024-07-22</div>
                    <div class="toggle-content"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

5、拷贝生成的源代码

接下来，把代码拷贝到自己工程。根据源码再去做些细微的调整，就可以直接使用了！

本地版使用方式

如果不想使用在线版的，也可以自己根据github的源码在本地搭建下，直接访问本地页面。本地安装主要有两种方式：源码启动和docker启动。

源码安装启动

首先启动后端（使用 Poetry 来管理依赖）：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

启动前端部分：

1
2
3

cd frontend
yarn
yarn dev

启动完成后，在浏览器输入 http://localhost:5173 访问应用。

docker启动

如果你的本地或服务器上已经有docker环境，那么可以直接使用docker来启动。

1 2	`echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build`

同样的，启动完成后，在 http://localhost:5173 访问应用

总结

Screenshot to Code是一款超强的一键将图片转成代码的工具，它可以为程序员节省大量时间，而且使用起来非常简单！唯一缺点是：生成的代码还是需要手工复制到自己工程，根据自己工程结构去做些细微调整！所以，短时间内看，AI工具还是不能替代人类程序员的！
大家可以去体验下，开发效率直接拉满！

后端技术互联

#开发工具

一键将图片的内容生成源码

http://example.com/2024/08/01/后端技术互联/一键将图片的内容生成源码/

作者

技术Z先生

发布于

2024年8月1日

许可协议

颠覆3D世界的革命者——Stable Fast 3D 上一篇