用代码批量生成带设备为背景的预览图,请教大佬们要怎么做

2023-02-09 15:36:08 +08:00
 FaiFai

需求是这样的: 一张是 iPhone 的息屏图片, 一张是壁纸的图片, 要用这两张图片合成,将壁纸镶嵌到 iPhone 息屏图片的屏幕上。

请问各位大佬有什么解决方案吗? 本人暂时想到的是大概用 ffmpeg 进行图片处理,但是不知道用什么命令可以实现。 还是说有别的更好方案?

1315 次点击
所在节点    程序员
11 条回复
zcf0508
2023-02-09 15:39:30 +08:00
你需要的可能是 mockup
FaiFai
2023-02-09 15:52:10 +08:00
@zcf0508 谷歌了下,有看到这个,这个好像是在他们的网站上使用他们的模板操作的。

有没有可能,我可以在自己项目的后端代码上调用,自定义设备背景图和壁纸,实现批量处理。
nackily
2023-02-09 16:05:00 +08:00
抛开其他的不谈,你的需求是否仅仅只是想将两张图片合并到一张图片中?
rabbbit
2023-02-09 16:08:18 +08:00
opencv
leoQaQ
2023-02-09 16:10:30 +08:00
前面刚做过相同的需求:替换小程序码中间的 logo ,但是是前端。
网上搜了一下用 canvas 合成:相当于画一个图片,然后再画一个图片,最后转成 base64 。
visper
2023-02-09 16:12:13 +08:00
import java.awt.AlphaComposite;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;

public class MergeImages {
public static void mergeImages(String bottomImagePath, String topImagePath, String resultImagePath) {
try {
// 读取底部图片
BufferedImage bottomImage = ImageIO.read(new File(bottomImagePath));
// 读取顶部图片
BufferedImage topImage = ImageIO.read(new File(topImagePath));

// 创建结果图片
BufferedImage combined = new BufferedImage(bottomImage.getWidth(), bottomImage.getHeight(),
BufferedImage.TYPE_INT_ARGB);
// 创建画笔
Graphics2D g = combined.createGraphics();
// 绘制底部图片
g.drawImage(bottomImage, 0, 0, null);
// 设置图片的透明度
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f));
// 绘制顶部图片
g.drawImage(topImage, 0, 0, null);
// 释放画笔资源
g.dispose();
// 保存结果图片
ImageIO.write(combined, "PNG", new File(resultImagePath));
} catch (Exception e) {
e.printStackTrace();
}
}

public static void main(String[] args) {
mergeImages("bottom.png", "top.png", "result.png");
}
}
程序员要失业了
okakuyang
2023-02-09 16:16:45 +08:00
随便一个图片处理库的事
xiangyuecn
2023-02-09 16:24:45 +08:00
几行代码的事,竟然能想到去用 ffmpeg😅

逃不过手动提取坐标位置,剩下的交给图片处理代码,把一张图画到背景图的指定位置

高级点的,把背景图里面的一些元素抠出来,重新画回去,比如 傻逼灵动岛
viewrules
2023-02-09 16:24:58 +08:00
Tink
2023-02-09 16:39:02 +08:00
问问 chatgpt
Tink
2023-02-09 16:43:24 +08:00
这可以通过图像处理技术和计算机视觉的方法来实现。最常用的技术包括:OpenCV 、Pillow 或者 ImageMagick 。

如果你使用 Python ,可以使用 Pillow 库来实现这个功能:

首先,读取设备图像和预览图。

from PIL import Image

device_image = Image.open("device.jpg")
preview_image = Image.open("preview.jpg")

然后,使用 paste 方法将预览图粘贴到设备图像上。

device_image.paste(preview_image, (x, y), preview_image)

最后,使用 save 方法将合成的图像保存到磁盘上。

device_image.save("result.jpg")

同样,如果你使用其他编程语言,也有类似的图像处理库可以使用,例如:

在 Java 中可以使用 JavaCV 。
在 C++ 中可以使用 OpenCV 。
在其他语言中可以使用 ImageMagick 。
如果你需要批量生成多个带设备为背景的预览图,可以循环处理每一张图片,并使用同样的步骤生成预览图。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/914613

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX