{"id":20651924,"url":"https://github.com/jingshing/pixel-art-filter-web","last_synced_at":"2026-03-15T21:22:14.054Z","repository":{"id":63409692,"uuid":"567332082","full_name":"JingShing/Pixel-Art-Filter-Web","owner":"JingShing","description":"A web version pixel art filter can render image, gif and video. https://pixel.jingshing.com/","archived":false,"fork":false,"pushed_at":"2022-12-19T07:31:05.000Z","size":5736,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-07T06:17:01.615Z","etag":null,"topics":["filter","flask","image","image-processing","pixel","pixel-art","pixel-art-maker","pixel-editor","pixelart","web","website"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JingShing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-17T15:08:27.000Z","updated_at":"2023-03-01T06:36:09.000Z","dependencies_parsed_at":"2023-01-29T20:45:30.225Z","dependency_job_id":null,"html_url":"https://github.com/JingShing/Pixel-Art-Filter-Web","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JingShing%2FPixel-Art-Filter-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JingShing%2FPixel-Art-Filter-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JingShing%2FPixel-Art-Filter-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JingShing%2FPixel-Art-Filter-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JingShing","download_url":"https://codeload.github.com/JingShing/Pixel-Art-Filter-Web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224949674,"owners_count":17397208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filter","flask","image","image-processing","pixel","pixel-art","pixel-art-maker","pixel-editor","pixelart","web","website"],"created_at":"2024-11-16T17:30:46.950Z","updated_at":"2025-12-26T21:48:33.345Z","avatar_url":"https://github.com/JingShing.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixel-Art-Filter-Web\nEnglish | [繁體中文](README_TCH.md)\n\nA web version pixel art filter can render image, gif and video.\n\nweb version of my [pixel art filter tool](https://github.com/JingShing-Tools/Pixel-Art-transform-in-python).\n\nThis tool can render image, gif and video into pixel art style.\n\n# [My Pixel Art Filter Website](https://pixel.jingshing.com/english) is online now\nYou can [click this to enter my Pixel Art Filter Website](https://pixel.jingshing.com/english).\n\n### The repo is missing a .py file called ```private_key.py```\nBecause It is a file to provide private key.\n\nYou need to create one and put secret_key, api_key, api_secret in it Like:\n\nYou can see more detailed with [this repo](https://github.com/JingShing/Twitter-API-Python/blob/main/scripts/private_key.py)\n```py\nsecret_key = \"your_secret_key\"\napi_key = \"your_api_key\"\napi_secret = \"your_api_secret_key\"\n```\n\n## Usage\nIf you want to install modules enter this command: ```pip install -r requirements.txt```\n\u003e module you need(If you can't install requirement.txt):\n\u003e\n\u003e Flask\n\u003e\n\u003e numpy\n\u003e\n\u003e opencv-python\n\u003e\n\u003e Pillow\n\u003e\n\u003e tqdm\n\u003e\n\u003e MyQR\n\nIf you want to use please active: ```script/pixel_page.py```\n\nAnd then open: ```http://127.0.0.1:5000/```\n\nIf you want to use gunicorn on Linux:\n\u003e Install gunicorn using this command: ```pip install gunicorn```\n\u003e If you want to use gunicorn on your device.\n\u003e \n\u003e Way 1\n\u003e \n\u003e Please input this command: ```gunicorn --workers=4 -b 0.0.0.0:5000 pixel_page:app --daemon```\n\u003e \n\u003e --worker=amount // suggested 1 core 2-4 worker\n\u003e \n\u003e --daemon // can make gunicorn working in background\n\u003e \n\u003e Way 2\n\u003e \n\u003e use this command: ```gunicorn --config=gunicorn.config.py pixel_page:app``` or ```gunicorn -c gunicorn.config.py pixel_page:app```\n\n\u003cdetails\u003e\n\u003csummary\u003eIf you can't do video edit on Linux(Fixed H264 encode problem)\u003c/summary\u003e\nBecause it need to use H264 to encode video to display video on web browser. And Linux didn't have H264. Because Opencv can't release H264 encode tool. You need to compile a opencv by yourself.\n\n\u003e I will use ubuntu for example below. To teach how to compile a ver that can use H254.\n* If you want to compile it by yourself：\n\n  * Install compile tool and module you need\n \n    ```\n    sudo apt install build-essential cmake git pkg-config libgtk-3-dev \\\n        libavcodec-dev libavformat-dev libswscale-dev libv4l-dev \\\n        libxvidcore-dev libx264-dev libjpeg-dev libpng-dev libtiff-dev \\\n        gfortran openexr libatlas-base-dev python3-dev python3-numpy \\\n        libtbb2 libtbb-dev libopenexr-dev \\\n        libgstreamer-plugins-base1.0-dev libgstreamer1.0-dev\n    ```\n    \n  * git clone opencv and opencv contrib\n  \n    ```php\n    mkdir ~/opencv_build \u0026\u0026 cd ~/opencv_build\n    git clone https://github.com/opencv/opencv.git\n    git clone https://github.com/opencv/opencv_contrib.git\n    ```\n    \n  * CMake set OpenCV construct\n \n    ```jsx\n    cmake -D CMAKE_BUILD_TYPE=RELEASE \\\n        -D CMAKE_INSTALL_PREFIX=/usr/local \\\n        -D INSTALL_C_EXAMPLES=ON \\\n        -D INSTALL_PYTHON_EXAMPLES=ON \\\n        -D OPENCV_GENERATE_PKGCONFIG=ON \\\n        -D OPENCV_EXTRA_MODULES_PATH=~/opencv_build/opencv_contrib/modules \\\n        -D BUILD_EXAMPLES=ON ..\n    ```\n  \n  * If you success it will show the message below\n  \n    ```bash\n    -- Configuring done\n    -- Generating done\n    -- Build files have been written to: /home/vagrant/opencv_build/opencv/build\n    ```\n  \n  * Compile(-j for speeding compiling. number after j is your cpu core)\n  \n    ```go\n    make -j4\n    ```\n  \n  * Installing the module you compiled\n  \n    ```go\n    sudo make install\n    ```\n  \n  * Check version\n  \n    ```undefined\n    pkg-config --modversion opencv4\n    ```\n  \n  * Or using python Import to check version\n  \n    ```swift\n    python3 -c \"import cv2; print(cv2.__version__)\"\n    ```\n\n\u003c/details\u003e\n\n## [Introduction Video](https://www.youtube.com/watch?v=cJNWTVEHWV8)\nYou can click pic below to [watch vid](https://youtu.be/cJNWTVEHWV8).\n[![Usage](https://img.youtube.com/vi/cJNWTVEHWV8/maxresdefault.jpg)](https://youtu.be/cJNWTVEHWV8)\n\n# UI\n![UI](sample/UI_dk_en.png)\n\n\u003cdetails\u003e\n\u003csummary\u003eFeature Summary\u003c/summary\u003e\n \n## Auto tweet on Twitter\n * ![autotweet](sample/autotweet.png)\n * ![mytweet](sample/mytweet.png)\n\n\n## Image edit on web\n### Before\n![Before](sample/before.png)\n### After\n![After](sample/after.png)\n\n## Video edit on web\n### Before\n![Before_vid](sample/video_or.png)\n### After\n![After_vid](sample/video_edited.png)\n\n## QR code generate supported now\nSupport image and gif to generate QR code.\n\n![QR_code](sample/QR_code.png)\n\n## Video supported now\nYou can click the image below to watch [the video](https://youtu.be/W8HxlqgLQnQ).\n\n[![Video](https://i0.hdslb.com/bfs/archive/7220c2155a7e8550a7766eafead297b43cf93426.jpg@640w_400h_1c_!web-space-index-myvideo.webp)](https://youtu.be/W8HxlqgLQnQ)\n\n## GIF supported now\n* ![gif1 gif1](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/gif1.gif)\n* ![gif2 gif2](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/gif2.gif)\n\n## Original image\n![OR OR](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/or.jpg)\n\n## Effect 16bit\n![1 1](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/1.png)\n## Effect 4bit\n![2 2](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/2.png)\n## Effect 2bit\n![3 3](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/3.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUpdate Log\u003c/summary\u003e\n\n## Ver 1.0\n\n* Released exe\n* Feature\n  * Color num\n  * Pixel size\n  * Smoothing\n  * Outline\n  * Dithering\n\n## Ver 1.1\n\n* Add Chinese text\n* Add compression\n* Feature\n  * Add Saturation\n  * Add Contrast\n  * Add brightness\n\n## Ver 1.2\n\n* Add more option of color nums, contrast and saturation values\n\n## Ver 1.2.1\n\n* Add maker name\n\n## Ver 1.3\n\n* Add page system\n* Add mode switch\n* Add custom mode -\u003e can edit value you want\n\n## Ver1.4\n\n* Improved dithering effect. Removed noise points.\n\n## Ver1.5\n\n* Add gif module.\n* If file is gif it will be gif mode. It will automatic save as gif when transform is done.\n* Now supported gif.\n\n## Ver1.6\n\n* Working on Video module -\u003e can edit mp4 and avi with experiment module.\n  * flv file save has some bug.\n  * This module will eat most of your cpu. So i will wrapped it as another tool.\n* Found bug can't save as chinese character name file.\n* [video module](https://github.com/JingShing/Opencv-Video-edit-module)\n\n## Ver1.6.1\n\n* GIF\n\n  * Fixed gif duration error.\n\n  * now can support \".gif \"  and \" .GIF \"\n\n* Video\n\n  * Try to add video module in pixel art filter.\n  * It's an experimental area. Use it wisely and trust your computer.\n  * Now can transform video but there are some rules and thing you should know:\n    * If it start it won't stop and cannot pause so you need to use it wisely.\n    * It will take more time and ate almost your cpu when you use setting that are complex.\n    * If it done video cover will display on window. And it will automatically save at the folder you put the exe.\n    * Edited video will lost sound and become ultimately large. So be careful.\n  * I add cmd for process hint. It will be there until I removed video edit part.\n\n## Ver1.6.2\n\n* Add save success hint\n* Found gif convert bug. Fixed.\n* Add tqdm as process bar in cmd.\n  * Add process bar on both gif and video part in cmd.\n* Add video rendering window.\n  * You can press 'Q' to stop rendering video now\n\n## Ver1.6.3\n\n* Windows size will limit in a scope. -\u003e it will be limited in 800 X 600\n\n## Ver1.6.4\n\n* Add gif rendering display window\n* can stop render while rendering gif by pressing 'Q'\n\n## Ver1.7\n\n* Add mouse control:\n  * Use scroll up to scale up\n  * Use scroll down to scale down\n  * Use mouse mid button to make image back to original pos and scale rate\n  * Can drag image now by left click and moving mouse\n* Add dict to save sets to make code more flexible.\n\n## Ver1.7.1\n\n* Improved scaled image resolution\n* Can import and save sets. But mode should be same as saved set.\n\n## Usage\nYou can click pic to watch vid.\n[![Usage](https://img.youtube.com/vi/cJNWTVEHWV8/maxresdefault.jpg)](https://youtu.be/cJNWTVEHWV8)\n\n## Video supported now\n[![Video](https://i0.hdslb.com/bfs/archive/7220c2155a7e8550a7766eafead297b43cf93426.jpg@640w_400h_1c_!web-space-index-myvideo.webp)](https://youtu.be/W8HxlqgLQnQ)\n\n## GIF supported now\n* ![gif1 gif1](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/gif1.gif)\n* ![gif2 gif2](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/gif2.gif)\n\n## Original image\n![OR OR](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/or.jpg)\n\n## Effect 16bit\n![1 1](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/1.png)\n## Effect 4bit\n![2 2](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/2.png)\n## Effect 2bit\n![3 3](https://github.com/JingShing/Pixel-Art-transform-in-python/blob/main/sample/3.png)\n \n ## Ver1.8\n * Create Web version\n * Now can edit it on web\n ## Ver1.8.1\n * Added Gif web edit feature\n ## ver1.8.2\n * Added H264 to video edit to make web browser can play video successfully\n ## ver1.8.3\n * Now can remember last file you select.\n * Now can alert wrong file format.\n ## ver1.8.4\n * Add contrast edit.\n * Add saturation edit.\n ## ver1.8.5\n * Add English and Traditional Chinese can select from right upper corner.\n * Page will remember what last language you choose.\n ## ver1.8.6\n * Add uploaded file preview. It can show you file name, file size and display preview.\n * ![preview](sample/preview.png)\n ## ver1.8.7\n * Now page will remember your settings.\n * Add server side value detect to protect server cpu.\n * Add multi language support.\n * If you hover mouse cursor on the options it will pop hint bubble.\n ## Ver1.8.8\n * Add hash tool to keep same image waste space.\n  * more detailed can see [this github repo](https://github.com/JingShing-Python/Image-Hash-Detect-And-Delete).\n ## Ver1.9\n * working on twitter api\n * Now can add content and generate qrcode image.\n  * ![QR_code](sample/QR_code.png)\n ## ver1.9.1\n * Now can auto tweet.\n  * ![autotweet](sample/autotweet.png)\n  * ![mytweet](sample/mytweet.png)\n ## ver1.9.2\n * Fixed gif and video recycle using method\n * Now support webp file\n ## ver1.9.3\n * Add gallery page. It will collect #PixelArtFilterWeb post from twitter and add into it.\n ## ver1.9.4\n * Max size is 4MB now!\n \n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTo do list\u003c/summary\u003e\n\n- [ ] Custom Mode\n- [ ] kuwahara filter(Oil painting style)\n- [ ] Dark mode\n- [ ] Add Download button\n- [ ] Need new dither method(more fast more efficien and more perfect)\n- [ ] Loading GIF\n- [ ] Image Matting\n \n## Done\n2022/11/16\n- [X] Same image recycle\n\n2022/11/20\n- [X] Add hash detect\n \n2022/11/23\n- [X] Remember set\n- [X] Multi language support\n- [X] Mouse hover hint\n\n 2022/11/25\n- [X] QR code feature\n \n 2022/11/26\n- [X] Add twitter api to auto post\n \n 2022/11/30\n- [X] gallery from twitter hashtag\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjingshing%2Fpixel-art-filter-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjingshing%2Fpixel-art-filter-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjingshing%2Fpixel-art-filter-web/lists"}