ajax - Saving canvas to file on server with PHP -
I do not have much experience in PHP, but I'm successful by combining some examples to create it. I just want to save the image of a canvas element to a file on the server, now a PNA has been created with 0 bytes, so I'm almost there.
I was suggested to try another solution from a different thread, though unfortunately, this is the whole error (a PNG file 0 bytes) to me. Here is the complete index. FPP code:
& lt ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Meta name = "description" content = "" & gt; & Lt; Meta name = "viewport" content = "width = device-width, initial-scale = 1" & gt; & Lt; Title & gt; Fingerprint Test & lt; / Title & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Canvas id = "myCanvas" width = "578" height = "200" & gt; & Lt; / Canvas & gt; & Lt; Form name = "form1" & gt; & Lt; Input type = "text" id = "my_hidden" & gt; & Lt; / Form & gt; & Lt; Script & gt; Var Canvas = Document. GetElementById ('myCanvas'); Var reference = canvas.getContext ('2d'); // Start custom shape references. Font = "30px aerial"; Context.fillText ("Hello World", 10,50); & Lt; / Script & gt; & Lt; Button onclick = "make print ()" & gt; Click me & lt; / Button & gt; & Lt; Script & gt; Function makePrint () {document.getElementById ('my_hidden'). Value = canvas.toDataURL ('image / png'); Document.forms ["Form1"] submission () .; } & Lt; / Script & gt; & Lt ;? Php $ upload_dir = "picture /"; // Apply this function automatically to $ img = $ _POST ['my_hidden']; $ Img = str_replace ('data: image / png; base64,', '', $ img); $ Img = str_replace ('', '+', $ img); $ Data = base64_decode ($ img); $ File = $ upload_dir "Image_name.png"; $ Success = file_put_contents ($ file, $ data); Header ('location:'. $ _ POST ['return_url']); ? & Gt; & Lt; / Body & gt; & Lt; / Html & gt; Note that I have also tried to name the INPUT form "my_hidden" in addition to the id.
EDIT: With this special method, my problems were resolved with two changes first, "my_hidden" will actually be accompanied by an ID of the input field along with the ID. Second, there should be a method = 'post' in the form element.
By default, a form will be an HTTP GET, and you & lt; Form & gt; A method attribute is not specified at because it would be a GET $ _ POST ['my_hidden'] undefined. Try this:
& lt; Form name = "form1" method = "post" & gt; & Lt; Input type = "text" name = "my_hidden" & gt; & Lt; / Form & gt; For more information about the default form method, see:
Comments
Post a Comment