将 x,y 坐标数组转换成一条线 (jpg) - Python

Question

我收到了通过 API 调用在基本捕获设备上绘制的“签名”。

来自设备的响应数据中有一个带有“签名”的 json 对象，我在 javascript 中对其进行了预解析，然后传递给需要的 python 服务将捕获的签名存储为 base64 编码图像（最好是 jpg）。

我可以在 javascript 中进行转换（根据给出的答案），如果它必须存在，但我更愿意在 python 层中进行转换。

这是我得到的数据示例：

{ "data": [ { "x": "2B", "y": "58" }, { "x": "2D", "y": "5B" }, { "x": "2E", "y": "5E" }, { "x": "30", "y": "61" }, { "x": "30", "y": "63" }, { "x": "32", "y": "65" }, { "x": "33", "y": "67" }, { "x": "35", "y": "69" }, { "x": "36", "y": "6C" }, { "x": "38", "y": "6E" }, { "x": "3A", "y": "71" }, { "x": "3C", "y": "73" }, { "x": "3D", "y": "75" }, { "x": "41", "y": "79" }, { "x": "42", "y": "7B" }, { "x": "46", "y": "7F" }, { "x": "47", "y": "81" }, { "x": "49", "y": "83" }, { "x": "4D", "y": "89" }, { "x": "4F", "y": "8B" }, { "x": "52", "y": "8D" }, { "x": "54", "y": "8F" }, { "x": "57", "y": "90" }, { "x": "59", "y": "93" }, { "x": "5C", "y": "95" }, { "x": "61", "y": "9A" }, { "x": "63", "y": "9D" }, { "x": "66", "y": "9F" }, { "x": "69", "y": "A2" }, { "x": "72", "y": "A8" }, { "x": "74", "y": "AA" }, { "x": "77", "y": "AC" }, { "x": "79", "y": "AE" }, { "x": "7C", "y": "AF" }, { "x": "7E", "y": "B1" }, { "x": "80", "y": "B2" }, { "x": "82", "y": "B4" }, { "x": "85", "y": "B5" }, { "x": "87", "y": "B5" }, { "x": "89", "y": "B6" }, { "x": "90", "y": "B6" }, { "x": "95", "y": "B3" }, { "x": "97", "y": "B1" }, { "x": "99", "y": "AD" }, { "x": "9B", "y": "AC" }, { "x": "9D", "y": "A7" }, { "x": "9F", "y": "A4" }, { "x": "A2", "y": "9B" }, { "x": "A3", "y": "97" }, { "x": "A3", "y": "93" }, { "x": "A4", "y": "90" }, { "x": "A4", "y": "8C" }, { "x": "A5", "y": "87" }, { "x": "A5", "y": "77" }, { "x": "A6", "y": "73" }, { "x": "A6", "y": "67" }, { "x": "A7", "y": "63" }, { "x": "A7", "y": "60" }, { "x": "A9", "y": "5A" }, { "x": "A9", "y": "56" }, { "x": "AD", "y": "49" }, { "x": "AD", "y": "47" }, { "x": "AF", "y": "44" }, { "x": "B2", "y": "3A" }, { "x": "B3", "y": "36" }, { "x": "B6", "y": "2F" }, { "x": "BB", "y": "27" }, { "x": "BD", "y": "26" }, { "x": "BE", "y": "24" }, { "x": "C0", "y": "23" }, { "x": "C2", "y": "21" }, { "x": "C4", "y": "20" }, { "x": "C9", "y": "20" }, { "x": "FFFF", "y": "FFFF" }] }

我是否需要解析它以将其转换为 jpg，或者有什么方法可以使用 PIL（或其他库）将这组绘图转换为图像？

Answer 1

由于您在问题的标题中写了 python 或 js，这里是一个 js 片段，它在 <canvas> 元素中显示您的 json object。

    <canvas id="canvas" width="256" height="256"></canvas>
    <script type="text/javascript">
    
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var json = '{ "signature": { "data": [ { "x": "2B", "y": "58" }, { "x": "2D", "y": "5B" }, { "x": "2E", "y": "5E" }, { "x": "30", "y": "61" }, { "x": "30", "y": "63" }, { "x": "32", "y": "65" }, { "x": "33", "y": "67" }, { "x": "35", "y": "69" }, { "x": "36", "y": "6C" }, { "x": "38", "y": "6E" }, { "x": "3A", "y": "71" }, { "x": "3C", "y": "73" }, { "x": "3D", "y": "75" }, { "x": "41", "y": "79" }, { "x": "42", "y": "7B" }, { "x": "46", "y": "7F" }, { "x": "47", "y": "81" }, { "x": "49", "y": "83" }, { "x": "4D", "y": "89" }, { "x": "4F", "y": "8B" }, { "x": "52", "y": "8D" }, { "x": "54", "y": "8F" }, { "x": "57", "y": "90" }, { "x": "59", "y": "93" }, { "x": "5C", "y": "95" }, { "x": "61", "y": "9A" }, { "x": "63", "y": "9D" }, { "x": "66", "y": "9F" }, { "x": "69", "y": "A2" }, { "x": "72", "y": "A8" }, { "x": "74", "y": "AA" }, { "x": "77", "y": "AC" }, { "x": "79", "y": "AE" }, { "x": "7C", "y": "AF" }, { "x": "7E", "y": "B1" }, { "x": "80", "y": "B2" }, { "x": "82", "y": "B4" }, { "x": "85", "y": "B5" }, { "x": "87", "y": "B5" }, { "x": "89", "y": "B6" }, { "x": "90", "y": "B6" }, { "x": "95", "y": "B3" }, { "x": "97", "y": "B1" }, { "x": "99", "y": "AD" }, { "x": "9B", "y": "AC" }, { "x": "9D", "y": "A7" }, { "x": "9F", "y": "A4" }, { "x": "A2", "y": "9B" }, { "x": "A3", "y": "97" }, { "x": "A3", "y": "93" }, { "x": "A4", "y": "90" }, { "x": "A4", "y": "8C" }, { "x": "A5", "y": "87" }, { "x": "A5", "y": "77" }, { "x": "A6", "y": "73" }, { "x": "A6", "y": "67" }, { "x": "A7", "y": "63" }, { "x": "A7", "y": "60" }, { "x": "A9", "y": "5A" }, { "x": "A9", "y": "56" }, { "x": "AD", "y": "49" }, { "x": "AD", "y": "47" }, { "x": "AF", "y": "44" }, { "x": "B2", "y": "3A" }, { "x": "B3", "y": "36" }, { "x": "B6", "y": "2F" }, { "x": "BB", "y": "27" }, { "x": "BD", "y": "26" }, { "x": "BE", "y": "24" }, { "x": "C0", "y": "23" }, { "x": "C2", "y": "21" }, { "x": "C4", "y": "20" }, { "x": "C9", "y": "20" }, { "x": "FFFF", "y": "FFFF" } ], "signature_format": "raw" } }';
    var signature = JSON.parse(json);
    var data = signature.signature.data;
    
    ctx.beginPath();
    ctx.moveTo(parseInt(data[0].x, 16), parseInt(data[0].y, 16));
    for(var i = 1; i < data.length; ++i)
    {
        ctx.lineTo(parseInt(data[i].x, 16), parseInt(data[i].y, 16));
    }
    
    ctx.stroke()
    
    </script>

将 x,y 坐标数组转换成一条线 (jpg) - Python

Turn array of x,y coordinates in to a line (jpg) - Python

python

image

python-imaging-library