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

Question

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

我将使用的平台是后端的 Elixir/Phoenix language/framework 和前端的 VueJS。当我尝试使用 Erlang 处理图像时，我很难找到用于像素处理的库。但是转念一想，如果每个用户的拼图图片都必须在服务器上创建，反正也很耗资源。

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

从科学的角度来看，您的首选方法是什么，优缺点？

Answer 1

我会选择 ImageMagick 命令行包装器。

根据 cropping documentation，有点像下面这样：

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

尽管 IM 有一个名为 Mogrify, it implements a limited set of operations, so I usually go with System.cmd/3 的 Elixir 包装器。

对于每个输入文件，您可以创建图块，下次访问该文件时，您可以从检查开始。如果文件已经被裁剪过，则只提供图块，否则在提供图块之前先裁剪它。与客户端解决方案不同，这基本上是一个干净的服务器端单行代码，容易进行逆向工程。

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 应用程序？

How would you process an image puzzle webapp on either the server side or the client side?

erlang

image-manipulation

elixir

vue.js

phoenix-framework