V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FaiFai
V2EX  ›  程序员

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

  •  
  •   FaiFai · 2023-02-09 15:36:08 +08:00 · 1317 次点击
    这是一个创建于 655 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    11 条回复    2023-02-09 16:43:24 +08:00
    zcf0508
        1
    zcf0508  
       2023-02-09 15:39:30 +08:00
    你需要的可能是 mockup
    FaiFai
        2
    FaiFai  
    OP
       2023-02-09 15:52:10 +08:00
    @zcf0508 谷歌了下,有看到这个,这个好像是在他们的网站上使用他们的模板操作的。

    有没有可能,我可以在自己项目的后端代码上调用,自定义设备背景图和壁纸,实现批量处理。
    nackily
        3
    nackily  
       2023-02-09 16:05:00 +08:00
    抛开其他的不谈,你的需求是否仅仅只是想将两张图片合并到一张图片中?
    rabbbit
        4
    rabbbit  
       2023-02-09 16:08:18 +08:00
    opencv
    leoQaQ
        5
    leoQaQ  
       2023-02-09 16:10:30 +08:00
    前面刚做过相同的需求:替换小程序码中间的 logo ,但是是前端。
    网上搜了一下用 canvas 合成:相当于画一个图片,然后再画一个图片,最后转成 base64 。
    visper
        6
    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
        7
    okakuyang  
       2023-02-09 16:16:45 +08:00
    随便一个图片处理库的事
    xiangyuecn
        8
    xiangyuecn  
       2023-02-09 16:24:45 +08:00   ❤️ 1
    几行代码的事,竟然能想到去用 ffmpeg😅

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

    高级点的,把背景图里面的一些元素抠出来,重新画回去,比如 傻逼灵动岛
    viewrules
        9
    viewrules  
       2023-02-09 16:24:58 +08:00
    Tink
        10
    Tink  
       2023-02-09 16:39:02 +08:00
    问问 chatgpt
    Tink
        11
    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 。
    如果你需要批量生成多个带设备为背景的预览图,可以循环处理每一张图片,并使用同样的步骤生成预览图。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4996 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 05:41 · PVG 13:41 · LAX 21:41 · JFK 00:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.