{"id":20619772,"url":"https://github.com/twtrubiks/croppic-combine-carousel-example","last_synced_at":"2026-04-13T21:31:52.541Z","repository":{"id":84518906,"uuid":"77316077","full_name":"twtrubiks/Croppic-combine-Carousel-Example","owner":"twtrubiks","description":"Croppic 搭配 Carousel 簡單範例 ，使用 Python Flask ","archived":false,"fork":false,"pushed_at":"2016-12-25T08:15:01.000Z","size":741,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-06T20:14:08.791Z","etag":null,"topics":["bootstrap-carousel","croppic","dropzone","flask","pillow","python","tutorial"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-25T07:47:21.000Z","updated_at":"2017-08-14T18:05:01.000Z","dependencies_parsed_at":"2023-03-02T04:30:27.917Z","dependency_job_id":null,"html_url":"https://github.com/twtrubiks/Croppic-combine-Carousel-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twtrubiks/Croppic-combine-Carousel-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FCroppic-combine-Carousel-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FCroppic-combine-Carousel-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FCroppic-combine-Carousel-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FCroppic-combine-Carousel-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/Croppic-combine-Carousel-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FCroppic-combine-Carousel-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31771813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bootstrap-carousel","croppic","dropzone","flask","pillow","python","tutorial"],"created_at":"2024-11-16T12:12:29.389Z","updated_at":"2026-04-13T21:31:52.522Z","avatar_url":"https://github.com/twtrubiks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Croppic combine Carousel Example - Python Flask \nCroppic 搭配 Carousel 簡單範例 ，使用 Python Flask \n\n* [Youtube Demo](https://youtu.be/fbZ0S659S_g)  \n\n常看到別人的網站有上傳圖片(並且有截圖功能)，教你使用 Python [Flask](http://flask.pocoo.org/) 快速建立一個。\n\nCroppic 搭配 Bootstrap Carousel 簡單範例 📝\n\n## 特色\n* 使用 [croppic](http://www.croppic.net/) 實現截圖功能。\n* 搭配 Bootstrap Carousel 。\n* 搭配 SQLite。\n\n\n## 安裝套件 Pillow\n請先確定電腦有安裝 [Python](https://www.python.org/)\n\n接著請安裝[ Pillow ]( http://pillow.readthedocs.org/en/3.1.x/index.html ) \n```\npip install Pillow\n```\n更多資料可參考 [ http://pillow.readthedocs.org/en/3.1.x/index.html ]( http://pillow.readthedocs.org/en/3.1.x/index.html ) \n\n之前我也有稍微介紹過[ Pillow ]( http://pillow.readthedocs.org/en/3.1.x/index.html ) ，可參考 [pillow-examples ]( https://github.com/twtrubiks/pillow-examples ) \n\n### 使用 Croppic \n\n更多 croppic 資料 ，可參考  [croppic](http://www.croppic.net/)\n\n\n\n## 執行畫面\n首頁\n\n![alt tag](http://i.imgur.com/AYxeOud.jpg)\n\n按 上傳圖片 的按鈕\n\n![alt tag](http://i.imgur.com/h4aSEFu.jpg)\n\n上傳自己想要裁切的圖片\n\n![alt tag](http://i.imgur.com/UK7e7HC.jpg)\n\n輸入圖片的描述\n\n![alt tag](http://i.imgur.com/XRclGOI.jpg)\n\n接著你就會看到 Bootstrap Carousel 裡面有圖片了\n![alt tag](http://i.imgur.com/6JLf0Iw.jpg)\n\n當你上傳更多的圖片\n![alt tag](http://i.imgur.com/chNXkOl.jpg)\n\n裁切過的圖片放在 \u003cb\u003ecroppic-flask/static/uploads\u003c/b\u003e\n\n![alt tag](http://i.imgur.com/75OImp6.jpg)\n\nSQLite\n\n![alt tag](http://i.imgur.com/UbqSqtx.jpg)\n\n## 後記\n因為要截圖，所以必須用到[ Pillow ]( http://pillow.readthedocs.org/en/3.1.x/index.html ) 這個套件，稍微麻煩一點點，如果你單純只是要傳檔案，\n\n可以使用之前介紹過的 [ Dropzone.js ](http://www.dropzonejs.com/)，這個就是直接傳給你檔案，會比較方便，可參考我之\n\n前寫的範例[ flask-dropzone-wavesurfer ](https://github.com/twtrubiks/flask-dropzone-wavesurfer )。\n\n\n \n## 執行環境\n* Python 3.4.3\n\n## Reference \n* [croppic](http://www.croppic.net/)\n* [ Pillow ]( http://pillow.readthedocs.org/en/3.1.x/index.html ) \n\n## License\nMIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fcroppic-combine-carousel-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fcroppic-combine-carousel-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fcroppic-combine-carousel-example/lists"}