anilkay/pyscript image manipulation

## pyscript image manipulation
<!DOCTYPE html>
<html>
    <head>
    <title>    Deneme</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <h1>Evet</h1>
        <div id="main_img"></div>
        <form onsubmit="return false">
            <input type="text" id="name" name="name" value="Ethan Hunt"><br>
        <input type="file" id="img-input" name="img-input" value="" />
        <input  type="submit"  id="btn_submit" pys-onClick="display_image"></button>
    </form>
    </body>
    <py-env>
        - Pillow

    </py-env>
    <py-script>
         #original source https://jeff.glass/post/pyscript-image-upload/
         #import numpy as np no module name numpy
         #import matplotlib.pyplot as plt
         #from pyodide import create_proxy
         #print('Now you can!')
        </py-script>|
        <py-script output="main_img">
            #import matplotlib.pyplot as plt
            #from skimage import io
            from pyodide import create_proxy
            from js import document, console, Uint8Array, window, File
            import base64
            import io
            from PIL import Image, ImageFilter,ImageOps

            #io.imread("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaHLWhcV7HjDWFniLa7DRVq_js0UzKyy3dog&usqp=CAU");
            #plt.imshow("https://m.media-amazon.com/images/M/MV5BMGJhZTg1OTAtYzJkMC00YzQyLTgxMDgtMTVkNDYyMzNiOTkxXkEyXkFqcGdeQXVyNTA5NTEyMzE@._V1_UY1200_CR85,0,630,1200_AL_.jpg")
            def display_image(*args, **kargs):
                print(args)
                print(kargs)
                return "Your enemy is sleepy."
            async def process_file(event):
                print("hey");
                fileList = event.target.files.to_py()

                for f in fileList:
                        array_buf = Uint8Array.new(await f.arrayBuffer())
                        bytes_list = bytearray(array_buf)

                        my_bytes = io.BytesIO(bytes_list)

                        my_image = Image.open(my_bytes)
                        gray_image = ImageOps.grayscale(my_image)
                        gray_image=gray_image.resize((1280,800))
                        #return gray_image
                        my_stream = io.BytesIO()
                        gray_image.save(my_stream, format="PNG")
                        image_file = File.new([Uint8Array.new(my_stream.getvalue())], "new_image_file.png", {"type": "image/png"})

                        new_image = document.createElement('img')
                        new_image.src = window.URL.createObjectURL(image_file)
                        document.getElementById("main_img").appendChild(new_image)

                        #print(my_image)


            def main():

                file_event = create_proxy(process_file)
                e = document.getElementById("img-input")
                e.addEventListener("change", file_event, False)
            main()
        </py-script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title> Deneme</title>
	<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
	<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
	</head>
	<body>
	<h1>Evet</h1>
	<div id="main_img"></div>
	<form onsubmit="return false">
	<input type="text" id="name" name="name" value="Ethan Hunt"><br>
	<input type="file" id="img-input" name="img-input" value="" />
	<input type="submit" id="btn_submit" pys-onClick="display_image"></button>
	</form>
	</body>
	<py-env>
	- Pillow

	</py-env>
	<py-script>
	#original source https://jeff.glass/post/pyscript-image-upload/
	#import numpy as np no module name numpy
	#import matplotlib.pyplot as plt
	#from pyodide import create_proxy
	#print('Now you can!')
	</py-script>\|
	<py-script output="main_img">
	#import matplotlib.pyplot as plt
	#from skimage import io
	from pyodide import create_proxy
	from js import document, console, Uint8Array, window, File
	import base64
	import io
	from PIL import Image, ImageFilter,ImageOps

	#io.imread("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaHLWhcV7HjDWFniLa7DRVq_js0UzKyy3dog&usqp=CAU");
	#plt.imshow("https://m.media-amazon.com/images/M/MV5BMGJhZTg1OTAtYzJkMC00YzQyLTgxMDgtMTVkNDYyMzNiOTkxXkEyXkFqcGdeQXVyNTA5NTEyMzE@._V1_UY1200_CR85,0,630,1200_AL_.jpg")
	def display_image(args, *kargs):
	print(args)
	print(kargs)
	return "Your enemy is sleepy."
	async def process_file(event):
	print("hey");
	fileList = event.target.files.to_py()

	for f in fileList:
	array_buf = Uint8Array.new(await f.arrayBuffer())
	bytes_list = bytearray(array_buf)

	my_bytes = io.BytesIO(bytes_list)

	my_image = Image.open(my_bytes)
	gray_image = ImageOps.grayscale(my_image)
	gray_image=gray_image.resize((1280,800))
	#return gray_image
	my_stream = io.BytesIO()
	gray_image.save(my_stream, format="PNG")
	image_file = File.new([Uint8Array.new(my_stream.getvalue())], "new_image_file.png", {"type": "image/png"})

	new_image = document.createElement('img')
	new_image.src = window.URL.createObjectURL(image_file)
	document.getElementById("main_img").appendChild(new_image)

	#print(my_image)


	def main():

	file_event = create_proxy(process_file)
	e = document.getElementById("img-input")
	e.addEventListener("change", file_event, False)
	main()
	</py-script>
	</html>
No results found