The third useful canvas operation we will discuss is saving the content of the canvas as an image. As you may already know, traditionally, files can be saved by downloading them from a server. There are serious security considerations behind the restriction of saving anything to the hard drive that's created on the client side. However, there is no restriction in displaying a dynamically created image.
In this example, called ch07_print, we will create a control that dynamically creates an image based on the map canvas's context and opens it in a new tab. This way, we can download the image just like any other plain image from a web page. First, we will create a new control to save map states:
ol.control.Print = function (opt_options) {
var options = opt_options || {};
var _this = this;
var controlDiv = document.createElement('div');
controlDiv.className = options.class || 'ol-print ol-unselectable ol-control';
var controlButton = document.createElement...