elcaiaimar Posted October 27, 2014 Share Posted October 27, 2014 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2014 Share Posted October 27, 2014 If the buton is an <a> element you can use the download property. button.href = canvas.toDataURL("image/png");button.download = 'file.png'; Link to comment Share on other sites More sharing options...
elcaiaimar Posted October 27, 2014 Author Share Posted October 27, 2014 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); Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2014 Share Posted October 27, 2014 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. Link to comment Share on other sites More sharing options...
elcaiaimar Posted October 27, 2014 Author Share Posted October 27, 2014 woow! It works! you have saved me! Thank you very much Ingolme! ) Link to comment Share on other sites More sharing options...
elcaiaimar Posted October 28, 2014 Author Share Posted October 28, 2014 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! Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2014 Share Posted October 28, 2014 This probably happens if you're loading images from another domain name. Link to comment Share on other sites More sharing options...
elcaiaimar Posted October 28, 2014 Author Share Posted October 28, 2014 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! Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2014 Share Posted October 28, 2014 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. Link to comment Share on other sites More sharing options...
elcaiaimar Posted October 28, 2014 Author Share Posted October 28, 2014 Ah ok, if is so complicated I think I will continue with another thing, Thank you a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now