为了发小红书卖 AI 壁纸，做了个套 iPhone 锁屏模板的网站

[checkcai]

背景

前段时间 AI 绘图很火，自己也生成了一些图片在售卖。这个过程中我发现除了生成图片外，做样机图片也很费事。在网上搜索一番，发现有很多样机网站，但是基本都没有提供锁屏界面、小组件颜色这些设置，于是就自己搞了个套 iPhone 样机的网站。 壁纸样机生成器 点击前往 。

使用说明

在输入框处复制图片链接（比如：Midjourney 生成图片的链接），或者点击右边的上传按钮上传图片。可以

1. 切换不同的模板，搭配不同类型的图片。
2. 设置 iPhone 样机的样式，比如锁屏界面、桌面、仅样机。
3. 隐藏 iPhone 的边框，在小红书上还挺火，效果见仁见智。
4. 设置状态栏、时间、小组件的颜色。
5. 如果模板的背景不满意，还可以自己上传图片或调整颜色作为背景。

💡下面是一些小细节：

• 在壁纸过亮时，会自动加上一层蒙层，让其亮度降下来。iPhone 就是这样的~
• 颜色选择里面会根据当前的图片提供颜色推荐。

特别感谢

这个项目使用 Vue3 搭建，同时使用到的库有：

• modern-screenshot: 把 dom 转成 png
• node-vibrant：在图片中提取主要颜色
• stackblur-canvas：对图片进行模糊处理

在此表示感谢！

问问大伙

问问大伙，有现成的 3D iPhone 模型库吗？我同事说之前他有看到过，但是现在怎么也搜不到。想问问大家是否知道，谢谢大家~

[mulander]

之前写了一个假 3d 的[iphone12]( https://mulander-j.github.io/all-blue/?path=/docs/1blog-iphonekit--docs)

- [纯 css 手机模型]( http://marvelapp.github.io/devices.css/)
- [3d 模型网站]( https://www.turbosquid.com/)

[moonrailgun]

从图片中提取主要颜色，如果就前端用可以试试我的实现，40 行代码不到。
这个库有点大了感觉，感觉实现的太复杂了

https://github.com/msgbyte/tailchat/blob/8f3ec1c996b1ebb86d88ae3c0fee3b95a08eb86b/client/web/src/utils/image-helper.ts#L16-L59

[maemolee]

小红书的壁纸我一般都是三连求图，主打一个心诚则灵。

[checkcai]

@moonrailgun 大佬牛~

[checkcai]

@mulander 牛牛牛

[hxqbeyond]

收入如何

[astrodaw]

@me1onsoda 想多了，小红书一堆，大学生买和卖这个的多，看到一个学生靠卖这个赚 5 万了，这东西也没版权监管的。