How to process image data with python and js

Question

I need some help to make python and JS work together. There are already answers about it on the internet but I can't make it work. Let me explain the problem :

I have an image to analyse, actually to get the coordinates of all pixels of a certain colour, and store these coordinates in an array or so. This script is pretty simple and works well.

But my question is, how do I do to have a landing web page where the visitor uploads his image, the site stores it, launches my python script to get these coordinates I want and then retrieves it back in the JS and store it in an array?

I have used the JSON module to export these coordinates into a JSON file but it's really the process, juggling between the scrips that I don't how to do.

Here is the python script if it can be of any use :

from PIL import Image
import json
from random import *

im = Image.open("foo.png") 
pixels = im.load()  

width, height = im.size
coord_line = [] 

for x in range(0,width, 1):
    for y in range(height):
        r,g,b = im.getpixel((x,y))
        if r == 0 and g==0 and b==0:
            coord_line.append([x,y])

with open('data.json', 'w') as outfile:
    json.dump(coord_path, outfile)

Thank you!

Answer 1

But my question is, how do I do to have a landing web page where the visitor uploads his image, the site stores it, launches my python script to get these coordinates I want and then retrieves it back in the JS and store it in an array?

This is the part where you would want to learn backend servers in python more in depth. Javascript runs on the frontend(for the most part) and in the case that you're going to use it, python runs in the back end. Ideally you want to have a server in the backend processing the user uploaded images and then in a RESTful way return it back to the user.

I recommend learning Flask, its a very easy to learn lightweight web server in Python.

Flow

Frontend html/js handles homepage and user upload >> FLASK Server handles image manipulation request>>FLASK Server writes or returns the data back to the user through a request of some sort