您将如何在服务器端或客户端处理图像拼图 web 应用程序？ [关闭]

Question

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

我将使用的平台是后端的 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。

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