javascript - How to store canvas content returned by toDataURL method as an image on disk in JSF -
I created an image using svg and javascript, I want the user to save it.
View code: You can use data hidden through a hidden input field on the backing bean Can send: And set the value of the inputHidden value to your Javascript like this: UPDATE: The TODataURL method returns a string and you can save it as a string in the backing bean, string base 64 is encoded, so it can be decoded back into an image and Can be saved on disk in the root of the webpad:
& lt; Script & gt; Var svg = $ ('# map'). Html () Replace (/> \ s + / g, "& gt;"). Replace (/ \ s + & lt; / g, "& lt;"); // canvg cancel all the locations between tags ('cvs', svg, {ignoreMouse: true, ignoreAnimation: true}); Var Canvas = Document. GetElementById ('CVS'); Var img = canvas.toDataURL ("image / png"); & Lt; / Script & gt;
& lt; H: body & gt; & Lt; Center & gt; & Lt; Div id = "map" & gt; & Lt; / Div & gt; & Lt; / Center & gt; & Lt; A href = "#" id = "saveBtn" & gt; Save & lt; / A & gt; & Lt; Canvas ID = "CVS" width = "0" height = "0" & gt; & Lt; / Canvas & gt; One ???? & Lt; H: form id = "formId" & gt; & Lt; H: Input Text id = "inputId" value = "# {bean.property}" /> & Lt; H: command button id = "button id" value = "button" verb = "# {bean. Action}" /> & Lt; / H: form & gt; & Lt; / H: Body & gt;
var dataURL = canvas.toDataURL ("image / png"); Var hidden = document.getElementById ("dataURL"); Hidden.value = dataURL;
The public class implements UserBean Serializable {Private string dataURL; Public string getDataURL () {returnURL; } Public Zero SetData URL (string data URL) {this.dataURL = dataURL; } Public void submit () {External Contact External = FacesContext.getCurrentInstance (). GetExternalContext (); Universalcontent sublextext = (external_content) external.getContext (); String filename = servletContext.getRealPath ("cloud.png"); BASE64Decoder decoder = new BASE64Decoder (); Byte [] decodedBytes = decoder.decodeBuffer (dataURL.split ("data: image / (png | jpg); base64,") [1]); BufferedImage imag = ImageIOread (New bytereinputstream (decodedbits)); ImageIO.write (image, "PNG", new file (filename)); }}
Comments
Post a Comment