【问题标题】:Spinning circle with transloadit. Is it possible with watermark or image rotation?带有 transloadit 的旋转圆圈。是否可以使用水印或图像旋转?
【发布时间】:2020-04-16 14:56:56
【问题描述】:

我正在尝试以艺术品作为蒙版来实现旋转圆圈。 从我所见,没有办法使用移动水印或图像的自动旋转。是否可以使用transloadit?

结果应该是“乙烯基”旋转。

【问题讨论】:

  • 你能提供一个旋转圆圈艺术品的最小例子吗?这个圈子是如何以及何时出现的?
  • 对不起,我缺乏解释。像这样:youtube.com/watch?v=jN3J5ZVoDps - 以视频为基础并在内部旋转艺术品(作为水印)。如果这是不可能的,也许只是一个静态图像,旋转,结果会像这个视频一样。
  • 为什么必须使用 Transloadit?我提供了一个简单的 HTML/CSS/JS 示例。请检查我的答案。
  • 对不起,我想生成一个要分发的视频,而不是 HTML...

标签: transloadit


【解决方案1】:

这个问题回答起来相当复杂,但使用 Transloadit 非常可行。我将使用 python 主要为OpenCV 回答它,但当然你可以使用你喜欢的语言——我会尽量让它与语言无关。 我使用了 4 个不同的模板来获得我们想要的结果,以及一些本地 python 魔术来将所有内容联系在一起 - 就这样。

  1. 首先,我们需要调整图像大小,使其与黑胶唱片完美契合。
{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "resize": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "resize_strategy": "fillcrop",
      "width": 350,
      "height": 350,
      "imagemagick_stack": "v2.0.7"
    }
  }
}
  1. 现在,我们要使用 OpenCV 和 NumPy 屏蔽此图像,如下所示:
# Mask the image
# Reads the input image
img = cv2.imread(img_path)
# Creates a mask with the same size as the image
mask = np.zeros(img.shape, dtype=np.uint8)
# Creates a white circle in the centre
mask = cv2.circle(mask, (175, 175), 175, (255, 255, 255), -1)
# Makes a small whole in the centre of the mask
mask = cv2.circle(mask, (175, 175), 20, (0, 0, 0), -1)
result = cv2.bitwise_and(img, mask)

这将拍摄一张图像,并为其创建一个看起来像甜甜圈的蒙版。

然后,在图像和蒙版之间使用按位与运算,最终得到原始图像的千篇一律

  1. 但我们仍然需要移除黑色背景 - 这就是我们使用此模板的目的:
{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "trimmed": {
      "use": ":original",
      "robot": "/image/resize",
      "alpha": "Activate",
      "type": "TrueColor",
      "transparent": "0,0,0",
      "imagemagick_stack": "v2.0.7"
    }
  }
}

这只会使所有黑色像素透明。

  1. 我们现在可以使用Transloadit's watermark feature 将此图像叠加到我们的黑胶唱片上
{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "watermark": {
      "use": ":original",
      "robot": "/image/resize",
      "watermark_size": "33%",
      "watermark_position": "center",
      "imagemagick_stack": "v2.0.7"
    }
  }
}
  1. 现在,剩下的就是让它旋转。我们可以做的是创建 60 帧,让图像旋转,然后使用 /video/merge 机器人 - 将它们拼接成无缝的 GIF。
{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "rotate_image": {
      "use": ":original",
      "robot": "/image/resize",
      "rotation": "${file.basename}",
      "resize_strategy": "crop",
      "imagemagick_stack": "v2.0.7"
    },
    "animated": {
      "robot": "/video/merge",
      "use": {
        "steps": [
          {
            "name": "rotate_image",
            "as": "image"
          }
        ],
        "bundle_steps": true
      },
      "result": true,
      "ffmpeg_stack": "v4.3.1",
      "ffmpeg": {
        "f": "gif",
        "pix_fmt": "rgb24"
      }
    }
  }
}

在这里,我使用图像的名称来确定将其旋转多少度 - 因此,当我将文件上传到机器人时,我将使用以下 python 代码根据其在数组中的索引来命名图像:

# Now we make a list of images that represent each frame
no_of_frames = 60
assembly = tl.new_assembly({'template_id': [SPINNING_VINYL_TEMPLATE_ID]})
directory = 'Assets/Frames/{image}'.format(image=img_name)
# Length of our animation in seconds
length = 2

for i in range(no_of_frames):
    if not os.path.exists(directory):
        os.mkdir(directory)
    # Creates an image based on the index in the animation
    # We pass this to the robot so it knows how many degrees to rotate the image by
    location = '{directory}/{index}.png'.format(directory=directory, index=round(i*360/no_of_frames))
    cv2.imwrite(location, finished_vinyl)
    assembly.add_file(open(location, 'rb'))

This is my end result

【讨论】:

    猜你喜欢
    • 2011-10-13
    • 2019-04-25
    • 2013-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-14
    相关资源
    最近更新 更多