I have an image in HTML5 canvas which is taken from webcam's live stream. When I get a frame as snapshot and save it in canvas I do this
var myImage = canvas.toDataURL("image/png");
dom.write('<form method="post" action="upload.php"><input type="myImage" value="'+myImage+'" /><input type="submit" value="Submit" /></form>')
and in upload.php I do this
header("Content-type: image/png");
$img= $_GET["myImage"];
echo '<img src="data:image/gif;base64,'.$img.'" />';
doing this I get a popup window when page is loaded and when the form is submitted, it give me
data:image/png;base64,"VERY HUGE STRING"
I want to get it as an image. Please Help
Your call to header suggests you want to output the actual PNG image as the response to the request. However, you then write out an HTML tag, which is not valid in a PNG file.
If you want to write out the PNG image itself, presuming $img contains a valid PNG-format image, you can decode the base64 with the base64_decode function:
echo base64_decode($img);
If you want to show the image on an HTML page, change your header call to read Content-Type: text/html.
canvas.toDataURL() already includes the data:image/***;base64, part, so remove it from your output.
Related
I am using the below upload class for image upload and manipulating.
class.upload.php samples, a files uploading and images manipulation PHP class
Now I want to change form input type="file" to a text field where I will give a Image URL.
How can I make this uploading class to work.
Thanks In Advance.
this class seems to accept url's as arguments as well so just change the input type to text, name to for example image_url and use this line to manipulate the image as you wish after submitting the form:
$handle = new upload($_POST['image_url']);
Get the file name through text box and in background use php curl function to upload the file in the server and your uploading class will work fine
PHP Curl to upload file
there is a canvas with picture on it and a button.
user clicks on a button and it gets converted to img and that image sent to form and upload to server by PHP, i've tried to write something, but this one is out of my abilities.
how to do it? is there more easy way to solve the problem?
<canvas id="canvas" width="400px" height="400px">HERE USER DRAW< /canvas>
<button onclick="to_image()">Draw to Image< /button>
here is to_image():
var canvas = document.getElementById("canvas");
document.getElementById("theimage").src = canvas.toDataURL();
var data = canvas.toDataURL('image/png');
i've tried to change button like this:
<button type="submit" onclick="to_image()">Save< /button>
and created hidden input, to put that image there:
<input type="file" name="file" id="file" style="visibility:hidden"/>
finally change to_image() like:
document.getElementById("file").src = data;
still nothing happens, i'm new to javascript and php, so was a bit embarrassed to show code
You can use Javascript to get the canvas data and turn it into a URL (more information about toDataURL):
var drawing = document.getElementById('canvas-id').toDataURL('image/png');
You could then feed this URL to the server via an AJAX call, and have it process from there. This will be base64 encoded so you'll have to do base64_decode (documentation), then you'll be left with an image blob which you can save with your PHP.
You'll have to use POST to submit the data as GET has length limits in IE and Chrome. I found an example of someone doing something very similar here with full code examples, in case you get stuck with it.
I'm trying to upload image and 2 values from text fields, but I can't use a input type="file" for resource becouse I first choose file using camera capture and preview image in <img ..., after that I replace the src of image tag with resized image (max 500kb) and that image I try to upload. If I use a input type="file" , than I upload a first Image, not a resized. Any sugestions ?
You could capture the cam image and transfer it (base64 encoded) independent from the form to your server. Or put the base64 encoded image into a hidden input.
I have some code that allows a user to annotate/draw on an image. Then there's a save button that sends the image with the annotations to the server as a base64 encoded string. I need to be able to "access" that data and basically save the edited image back to the server.
Button code:
<input id="clickMe" value="Save Image" onclick="ExportOpenImage();" type="button">
The function that is called:
function ExportOpenImage(){
window.open(sp.exportAsCanvas().toDataURL('image/png') )
}
So, my question is, how can I pass the base64 encoded string to the server for processing instead of sending it to the browser for display?
I'm using Raphael and canvas in this. If you need more of the code, please let me know.
I have a script to upload an image and display it. When i choose an image and click upload, it doesn't update the current image, but if i press f5 it will change the current image... thank you very much in advance. im just new in php.
<br><br><input type='submit' name=save value=save onClick='alert(\"Profile Updated!\")'><input type='hidden' name='id' value=$id>";
your browser is probably reusing the cached image, the best way to fix this is to add a unique tag at the end of the image url e.g.
in php i would generally have some kind of helper to do this e.g(very basic):
**
function image_tag($url,$attrs){
$id = abs((int)(microtime(true)*1000)) ); //bit overkill
return '<img src="'.$url.'?'.$id.'" '.$attrs.' />';
}
echo image_tag('some_url.jpeg',' class="my_image_class" ');
**
if you are updating the image with javascript try do something like the following:
**$('#some_img').attr('src',some_url+'?'+(+new Date()));**
should do the trick
can you display image like ??
if yes then you have to append time() so it will loaded properly for example display image like ">
if you just upload image using AJAX then get back image data and fill in to image object.
Here you use profile.php page for upload image so after that you have to redirect that page or reload.
for example after upload image put code header('location:index.php?msg=imageuploaded');