Question

我正在构建一个Web应用程序游戏，该游戏仅将图像文件作为文件系统的输入，将图像划分为块，然后将图像块随机放置，以便客户端用户可以重新定位块以恢复原始图像图片。

我将使用的平台是后端的Elixir / Phoenix语言/框架和前端的VueJS。当我尝试使用Erlang操纵图像时，我很难找到用于像素操纵的库。但是后来我想，如果每个用户的拼图图像都必须在服务器上创建，那么无论如何都会花费很多资源。

您认为最好将图像从服务器的文件系统发送到客户端，并在客户端使用Javascript创建图像块，还是在服务器端使用Erlang / Elixir做到这一点？

从科学的角度来看，您偏爱的首选方法是什么？

Answer 1

我会使用ImageMagick命令行包装程序。

convert my_image: -repage 60x40-5-3 \
 -crop 30x20 +repage my_image_tiles_%d.png`

尽管IM有一个名为Mogrify的Elixir包装器，但它实现了一组有限的操作，因此我通常会选择System.cmd/3。

对于每个输入文件，您可能会创建图块，并且下次访问该文件时，可能会先进行检查。如果文件已被裁切，则仅裁切瓷砖，否则裁切之前裁切瓷砖。与客户端解决方案不同，这基本上是一种干净的服务器端单一代码，易于进行逆向工程。

Answer 2

这就是我的做法。

# Args Explantion :
    # -resize 72x72! - Resizes the passed Image, `!` means don't care about aspect ratio
    # -crop 24x24 - Crops the image
    # -scene 1 - Start naming the cropped images starting with index 1
    # -%02d - produces output such as 00, 01, 02, 03
    # image_size - Actual image size
    # seg_size - Size of small segments/cropped images
    list = [
      "#{img_path}",
      "-resize",
      "#{image_size} x #{image_size}!",
      "-crop",
      "#{seg_size} x #{seg_size}",
      "-scene",
      "1",
      "#{new_tmp}/%02d.png"
    ]

    System.cmd("convert", list)

您将如何在服务器端或客户端处理图像拼图Web应用程序？

2 个答案: