{"id":4836,"date":"2020-01-23T07:51:44","date_gmt":"2020-01-23T06:51:44","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=4836"},"modified":"2020-01-24T18:56:26","modified_gmt":"2020-01-24T17:56:26","slug":"tkinter-imagebrowser-2-with-canvas","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/tkinter-imagebrowser-2-with-canvas\/","title":{"rendered":"Tkinter: ImageBrowser 2 &#8211; with canvas"},"content":{"rendered":"<p>This time we will create an Imagebrowser using Tkinter and canvas instead of loading the image in a label. So, nothing very different, but I think that using canvas you can be able to add a lot of more feature to this app: you could add drawings on top of the image and save them. I want also to add the chance to resize the images and other stuffs in the next future&#8230; so let&#8217;s go and watch the video.<\/p>\n<pre class=\"lang:default decode:true \">import tkinter as tk\r\nimport glob\r\n\r\n\r\ndef insertfiles():\r\n    for filename in glob.glob(\"*.png\"):\r\n        lst.insert(tk.END, filename)\r\n\r\n\r\ndef showimg(event):\r\n    n = lst.curselection()\r\n    filename = lst.get(n)\r\n    img = tk.PhotoImage(file=filename)\r\n    w, h = img.width(), img.height()\r\n    print(filename)\r\n    canvas.image = img\r\n    canvas.config(width=w, height=h)\r\n    canvas.create_image(0, 0, image=img, anchor=tk.NW)\r\n\r\n\r\nroot = tk.Tk()\r\nroot.geometry(\"800x600+300+50\")\r\nlst = tk.Listbox(root, width=20)\r\nlst.pack(side=\"left\", fill=tk.BOTH, expand=0)\r\nlst.bind(\"&lt;&lt;ListboxSelect&gt;&gt;\", showimg)\r\ninsertfiles()\r\ncanvas = tk.Canvas(root)\r\ncanvas.pack()\r\n\r\nroot.mainloop()\r\n<\/pre>\n<p>Remember to add that canvas.image = img. Without that line you won&#8217;t be able to see the image.<\/p>\n<h2>Live coding: Image browser with tkinter and canvas<\/h2>\n<p>There is the video about making an image browser with tkinter and cavas.<\/p>\n<p><iframe loading=\"lazy\" title=\"Tkinter: ImageBrowser2 (with canvas)\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/VL0NlMN2yDc?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n\t<!----- pubblicit\u00e0-------- vedi h:\\ads\\codice_di_prima.txt per il codice che era qui --------------------->\r\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- Altervista-pythonprogramming-336X280 -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4189782812829764\"\r\n     data-ad-slot=\"2548661001\"\r\n     data-ad-format=\"auto\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<h4>Tkinter test for students<\/h4>\r\n\r\n\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-make-a-different-test-for-every-student-part-1\/\",\"Tk Test Marker I\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-testmaker-part-ii\/\",\"Tk Test Maker II\"],\t\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-app-part-3\/\",\"Tk test Maker III\"]\r\n];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\t\r\n\r\n<h4>Tkinter articles<\/h4>\r\n<!-- calculator with memo -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/free-calculator-memo-with-tkinter-support-markdown-to-html-saving-too\/\">\r\n<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/03\/calcmemopy_banner.png\" width=\"100%\"><\/a>\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/?p=5719&preview=true\",\"Presentation app with SVG files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/png-joined-in-one-pdf-files\/\",\"Join png into pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-app-imgslide-3-1-slide-images-and-join-them-into-a-pdf\/\",\"ImageSlider 3.1\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-show-svg-files-svgslider-1-0\/\",\"SVGSlider 1.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/imageslider-3-0-tkinter-app-to-show-images-like-in-a-presentation\/\",\"ImageSlider 3.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-shows-an-svg-file\/\",\"SVG in tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-maker-app-part-iv-add-a-menu-with-tkinter\/\",\"Add a menu with tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-pdf-maker-app-with-python\/\",\"tkinter make pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcpy-2-0-the-second-and-final-part-of-calculator\/\",\"Live coding Calculator app part 2\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/split-every-page-in-a-pdf-i-a-different-pdf\/\",\"Split a pdf in different files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-calculator-from-skratch-part-1-calcpy\/\",\"Calculator from skratch p.1\"], \r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-and-tkinter-fully-working-listbox-to-do-app-for-skratch\/\",\"Tkinter ToDo App\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/copy-and-paste-tkinter-widget-code-app\/\",\"Copy and paste app for tkinter widgets\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcdoc-py-a-tkinter-app-to-memorize-operations\/\",\"calcdoc.py: a great calculator memo app\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-calculator-with-memo-of-operations\/\",\"Calculator + list of operations\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-smallest-calculator-ever\/\", \"Smallest calculator\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-gui-with-tkinter-labels-with-text-and-images\/\",\"Labels with images and text\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/a-toolbar-for-python-with-tkinter\/\",\"Toolbar in tkinter\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-grid-system-how-to-expand-a-button\/\",\"Fit Buttons to the Window\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-application-launcher-python-gui\/\",\"Tkinter app Laucher\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-how-to-add-an-image-to-a-button\/\", \"Image on a tkinter Button\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-imagebrowser-2-with-canvas\/\", \"Tkinter image browser 2 (canvas)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-image-broswer\/\",\"Tkinter image browser (label)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-pdf-fast-and-free-with-text-or-html\/\",\"Create PDF with Tkinter Text widget\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-evaluate-tests-part-1\/\",\"Tkinter App to Evaluate tests\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/simple-presentation-in-pure-python-while-you-learn-tkinter\/\",\"Presentation with Python\/tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-entry-widgets-example-make-a-shuffler-app\/\",\"Tkinter example: entry to shuffle lists\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/move-a-rectangle-with-text-inside-of-it-with-tkinter\/\",\"Moving a text with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-ttk-the-option-menu-widget\/\",\"Tkinter's OptionMenu (and ttk)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-watch-videos-with-live-coding\/\",\t\t\t\t\t\"Tkinter to watch videos\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/type-reader-app-in-python-pc-read-the-letters-you-type-tkinter\/\",\t\"Type Reader App\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-a-new-tkinter-widget-inputbox\/\",\t\t\t\t\t\t\t\"Create your Inputbox\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-open-a-new-window-and-just-one\/\", \t\t\t\t\t\t\"Open only one more window\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/a-simple-test-maker-with-python-and-tkinter\/\", \t\t\t\t\t\"Test maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/my-personal-notepad-toggle-tkinter-fullscreen\/\",\t\t\t\t\t\"Ebook maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-listbox-1\/\", \t\t\t\t\t\t\t\t\t\t\t\"Tkinter & listbox 2019 - 1\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-using-a-gui-graphic-user-interface-with-python-part-1\/', \t'Create a window'],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-a-window-video-1\/', \t\t\t\t\t\t\t\t'Create a window part 2'],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-more-windows-with-tkinter\/\",\t\t\t\t\t\t\t\t\"More windows tkinter!\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-part-2-binding\/', \t\t\t\t\t\t\t\t\t\t'Binding functions to key\/button '],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/all-tkinter-posts\/\",\">>>ALL TKINTER POSTS>>>\"]\r\n\t\t];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"Loading images and showing them in a GUI with Tkinter and Canvas, using your favourite language: Python\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/tkinter-imagebrowser-2-with-canvas\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":4837,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[159,179,49],"tags":[81,145,99,118,175,51],"class_list":["post-4836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas","category-images","category-tkinter","tag-bind","tag-canvas","tag-image","tag-listbox","tag-listboxselect","tag-tkinter"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=4836"}],"version-history":[{"count":2,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4836\/revisions"}],"predecessor-version":[{"id":4862,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/4836\/revisions\/4862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/4837"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=4836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=4836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=4836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}