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.
Related
I am using image cropping jquery plugin https://www.jqueryscript.net/other/Simple-jQuery-Client-Side-Image-Cropping-Plugin-Awesome-Cropper.html
To work this plugin I have to use <input id="someId" class="crop-img" type="hidden"> ( type="hidden" instead of type="file")
And the script to instantiate,
$(document).ready(function(){
$('.crop-img').awesomeCropper(
{ width:1020, height:434 , debug: true }
);
})
But the problem is I'm unable to get value in php laravel framework because of type="hidden", if I change it to type="file" I'm getting value but the cropping plugin is not working...
Help, please..
The problem is that this plugin saves the cropped image to that hidden input field in the form of base64 encoding. So you don't get a file type which you can send it via form submission.
What you can do is that get that data & send it to your server then there convert base64 to an image. You can get that data using JQuery like this,
let base64EncodedImage = $('#someId').val();
It will return an output which will look like this,
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAgAElEQVR4Xuydd3xcxbm/n+19V2V3teq9S5ZcZMu9YAO2AWODaQkQQgIhvSc3uUlukpvkpocL6Z2E3sHGGPdeZMuWrN7r7mqlXWl73/19JAjcJPyuCeDEutr5S/aZec8733l2Zs6cOe8I4vF4nHeQpotHYzGCoTDRaPQdWEoU/b+kgOCdgPUXqALBELFY7P+SLom6vEMF/gosv9+PdcyG0+lEIpFgMqURDkcwpRnf9DbTMAVCISKRv+6ppoHz+XxEolHUKhUikegdupkoPtsUeB2saagazjZiNluRyaQzw9r4hB2RUMg9H7jr7+o1Dc80OP5A8O+uBYNBWlrbkEll6A2pmNLS/ipPLOTDMelGqEwibO8nqMoix6Cmv7cXfaoOs2UCBAI0yUZMRhVtDc1IkpJQKNQo5CKkEhEeuwOZPosUtQTzUC9STQZGbZyOf
right now, my function looks like this
scope.downloadCsv = function(){
$http.({
method:'POST',
url:'php/crud.php',
data:scope.postPayload,
headers:{'content-type':'application/x-www-form-urlencoded'}
}).success(function(){console.log("download done!")});
};
I've tried binding that button to an ng-click, ng-submit, and following the instructions on Download text/csv content as files from server in Angular (which works, but not on Firefox).
I don't know the technical term, but I'm assuming I somehow needs to be able to click on a link with a "POST" request, that way the browser thinks it's not an ASYNC call, I just don't know how to accomplish it. It has to be a post because I'm passing a bunch of data to the server to operate on to generate the CSV. Any help is GREATLY Appreciated!
You cannot download a file with ajax. My 1st choice would be to just create a normal html form, to post to a hidden iframe:
<form method="post" action="php/crud.php" target="hidden_iframe">
<input type="hidden" name="data" value="{{postPayload}}">
<button type="submit">Download!</button>
</form>
<iframe name="hidden_iframe"></iframe>
I'm very new to coding on the web and I'm trying to make something work.
I'm trying to make a little webpage with an easy function to replace an existing image on the page with an image that the users chooses from his own computer. All of this is expected to be done offline. I have however, no idea how..
How do I tackle this?
p.s. With offline I mean, I am expected that this can be done locally without uploading to a server or anything. I am supposed to put this little page on a usb stick so it can be used as a little tool.
Well. you will need to implement file upload functionaility.
you could uses http://www.uploadify.com/
if so then you would use the onUploadSuccess method, to change the image.
when you say offline? do u mean no internet connection, or will the webpage live on a server like a intranet?
............Just to add to my own answer ........
OK, So you need it on a USB. why not install a standalone Server on the USB that way you can run PHP.
http://www.server2go-web.de/index.html
http://www.uwamp.com/en/
$("#file_upload").uploadify({
height : 30,
width : 120,
swf : 'include/fileuploader/uploadify.swf',
uploader : 'include/fileuploader/uploadify.php',
'onUploadSuccess' : function(file, data, response) {
console.log('The file was saved to: ' + data);
$("#img-preview").html("<img src='"+data+"' />");
}
});
I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.
Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.
HTML
First lets add the html for the input and a placeholder img element. You could of course dynamically add the img file with jQuery or native js.
<input id='ourfile' type='file' />
<!-- The image placeholder for our preview -->
<img id='preview' src='' />
Javascript
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');
// Create an instance of the 'native' FileReader.
fr = new FileReader();
// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
file = ourfile.files[0];
fr.readAsDataURL(file);
}
// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
preview.src = fr.result;
}
Details
The link in #Akki619's answer shows about details for checking validity of the image, etc.
Fiddle
Here is a link to a working example:
http://jsfiddle.net/rUvUX/4/
This (readAsDataURL) is what you are looking for.
See working example here
In the example attached, you can send the base64 data of your selected image for uploading also.
OUT OF TOPIC HERE: Most of the client are looking for a mobile web app, an app to take picture from phone and send to the server. Not entirely feasible in web apps.
you can use the below javascript to do this:
<script>
function changeImage(newimage)
{
image = document.getElementById('oldimage');
image.src = newimage;
}
</script>
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 this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.