home |  electronics |  toolbox |  science club |  tuxtalk |  photos |  e-cards |  online-shop



June 2022

firefox: saving high resolution images from a html-canvas

There is a recent trend in web-design that is really worrisome. A html canvas is used to load pictures and you can pan or zoom in/out but you can't save these pictures. This is a very strange trend. Web browsers can display image files natively.

In some cases the html designers offer a download button but that's rare. The panning and zooming is nice for small screens but using a local image viewer would still be better.

The firefox "responsive design mode" to the rescue: If you had a really huge screen and the image inside the html-canvas spans the entire screen then you would be able to take a screenshot with a good resolution.

The "responsive design mode" allows you to set the screen size. You can set it e.g to 5000x4000 pixel and that might be bigger than your actual screen but the screenshot feature inside the "responsive design mode" will still save the entire 5000x4000 pixel screen even if you don't see everything on your physical screen. This way you can save an entire image in full resolution.

canvas-screenshot-firefox_th.jpg
Take a screenhot of a very large virtual screen

Steps:
  1. Open web page in "responsive design mode"
  2. Set a very large screen size, e.g 5000x4000
  3. Position the image in the html canvas and zoom it the way you want it
  4. Take a screenshot from within firefox
  5. You get a screenshot of the entire screen, a 5000x4000 pixel image


Back to: "No preservatives added"



© 2004-2024 Guido Socher