Javascript 绘制傅里叶变换图形的路径

我目前正试图编写一个小小的JavaScript代码，用傅里叶变换绘制任何带有本轮的图片。该程序接收将要绘制的路径的坐标列表。例如，列表可以是

[{x:123, y: 1}, {x:174, y:18}, {x:183, 281}...]

然后程序将使用本轮连接这些点。程序本身的工作正如预期的那样，然而，我在实际获取给定图片的坐标时遇到了困难

下面的图片是我试图得到的坐标

我已经“成功”地使用ImageMagick提取了上图中黑点的所有坐标，如Mark Setchell的回答所述。当我的程序尝试绘制图片时，结果如下所示：

这并不是我想要的，因为我只是想画出轮廓。这里的问题是ImageMagick在向下工作时从左到右“读取”像素，这意味着我得到的坐标顺序错误。为了澄清，让我们看下图：

A -- B
         The coordinates are in the order A, B, C, D. The program will draw a line from A to B, from B to C and from C to D. This is not desired.  
C -- D

A -- B
     | The coordinates are in the order A, B, C, D. The program till draw a line from A to B, from B to C and from C to D. This is desired. 
D -- C

现在坐标是不希望的形式，如最上面的图片所示。这意味着程序将绘制之字形。我想以某种方式得到我的图片的坐标，这样它们的顺序就正确了，这样程序就可以沿着轮廓画，而不是画之字形。以下是我迄今为止提出的可能解决方案：

按正确顺序排列坐标列表。这可能涉及检查点之间的距离，并对所有点进行排序，以便在点之间的距离尽可能小的情况下，两个点彼此相邻

使用SVG图像并将路径中的所有点提取到列表中，如

[{x:x_1，y:y_1}，{x:x_2，y:y_2}…]

编写一个绘图程序，这样当我用鼠标跟踪一个图像时，鼠标的坐标会被推到一个列表中

老实说，我不知道如何实现1。二,。和备选方案3。似乎是解决这样一个问题的坏方法。有什么建议吗