您将如何在服务器端或客户端处理图像拼图webapp？ [关闭]

Question

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

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

您是否认为将图像从服务器的文件系统发送到客户端并使用Javascript在客户端创建图像块更好，或者您可以在服务器端使用Erlang / Elixir进行操作？

什么是你在科学基础上的首选方法，利弊？

Answer 1

这就是我这样做的方式。

# 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)

Answer 2

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

由cropping documentation，有点像下面会做：

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

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

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