One of the things I always liked about Firefox is that you can right-click any canvas and select “save image as”. Chrome and others don’t do that (well, Chrome doesn’t). Instead you need to get the image data, create a url and open a new tab or something in that order.
One very simple way to allow people to save a canvas as an image (and name it differently – which would have to be done by hand in the case of right-clicking on Firefox) is to use the download attribute of a link.
You can see this in action in this JSFiddle. Simply paint something and click the “download image” link.
The relevant code is short and sweet (canvas is the reference of the canvas element):
var link = document.createElement('a');
In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.
Web Professional Trends for 2013 – Chris Converse, Codify Design Studio
In this twelve minute interview Chris Converse, partner, designer and developer at Codify Design Studio we learn about his perspective on the topic of Web Professional Trends for 2013 as it relates to Responsive Design, Responsive Downloads and Responsive Imagery.
Specifically we learn:
• About Chris and his Codifydesign.com Company
• More about Chris’s education and advocacy efforts to bridge the relationship between the Web Designer and Web developer
• About how he is building on the Responsive Design trends with Responsive Download discoveries
• About Responsive Imagery
• About Responsive Downloads with Media Quires, CSS3 and HTML5 Elements
• About faster downloads with less intensive bandwidth requirements
• Advice for those that teach
• Pros and the Cons of Responsive Imagery
• Efforts at the W3C that will enable browsers to communicate to the server and your device with specific download speed capabilities that could deliver high res images to your Mobile device
• Examples of Server Side Responsive Imagery to detect things with PHP and .NE, picking out those images and dynamically assembling them
• How much we’ve progressed as an industry in the last decade
• An open discussion between Bill Cullifer, WebProfessionals.org Exec and Chris Converse regarding the current status of the industry
• About some of the debate in the Web Design community about best practices
• More about the great work at the w3c to support the Web professional community
• Some wireless industry history and honorable mention of wireless pioneer Craig McCaw from Bill Cullifer
• Links to more information about Chris and his resources
More about Responsive Download and Imagery
According to an article written by Chris for Lynda.com, when considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.
To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.
With this in mind, the
is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.
Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.
The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.
More about Chris Converse
If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse at the links below: