js function to save a png image

[elcaiaimar]

Hello everybody, I'm doing a viewer with openlayers 3 and I would like to have a button which run a function. This function must save a png image of the viewer. I have seen an example in the ol3 website (http://openlayers.org/en/v3.0.0/examples/export-map.html) but here the button is in the html file. My objective is to have this button inside the viewer.

 

At the moment I have the button into the map, but I fail writing the code, because when I click it, it doesn't work

 

Here my code:

 

button.addEventListener('click', function() { map.once('postcompose', function(event) { var canvas = event.context.canvas; href = canvas.toDataURL('image/png'); }); map.renderSync(); }, false);

 

Anybody know where is the problem?

 

Thank you very much.

[Ingolme]

If the buton is an <a> element you can use the download property.

button.href = canvas.toDataURL("image/png");button.download = 'file.png';

[elcaiaimar]

Thank you Ingolme but my button is a variable, Here is all my code:

 

ol.control.SearchFeatures = function(opt_options) { var options = opt_options || {}; var hiddenClassName = 'ol-unselectable ol-control search-features'; this.hiddenClassName = hiddenClassName; var shownClassName = hiddenClassName + ' shown'; this.shownClassName = shownClassName; var element = document.createElement('div'); element.className = hiddenClassName; var button = document.createElement('button'); element.appendChild(button); this.panel = document.createElement('div'); this.panel.className = 'panel'; element.appendChild(this.panel); var this_ = this; button.addEventListener('click', function() { map.once('postcompose', function(event) { var canvas = event.context.canvas; button.href = canvas.toDataURL('image/png'); button.download = 'mapa.png'; }); map.renderSync(); }, false); ol.control.Control.call(this, { element: element, target: options.target });};ol.inherits(ol.control.SearchFeatures, ol.control.Control);

[Ingolme]

Your button is an element. It's a <button> element because you defined it with createElement("button").

 

You need an <a> element in order to use the href and download attributes. You could make it an <a> element like this:

var button = document.createElement('a');element.appendChild(button);

You can use CSS to style it and make it look like a button visually.

[elcaiaimar]

woow! It works! you have saved me! Thank you very much Ingolme! )

[elcaiaimar]

I continue with an error, If I only have baselayers in my viewer, the save button works, but if I have overlayers too no. It apperars this error:

 

SecurityError: The operation is insecure.

 

I don't know why. How can I solve this?

 

Thank you a lot!

[Ingolme]

This probably happens if you're loading images from another domain name.

[elcaiaimar]

I'm using overlayers from geoserver (open source server for sharing geospatial data) and baselayers with wms service directly. Is this the problem? What can I do to solve this? Thank you Ingolme, you are great!

[Ingolme]

Perhaps you can use PHP as a proxy. You would need a local PHP file that reads the image data from the remote server and outputs it as an image.

[elcaiaimar]

Ah ok, if is so complicated I think I will continue with another thing, Thank you a lot