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.
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>
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 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.
i am currently working on a class that generates diagrams as pictures with php. I want to load these pictures dynamically with jquery. How can i do that?? I wont have a real picture file, just the content of the file when i call it with ajax... And i cant simply define the php script as the src because i need to pass Post parameters to the picture...
EDIT:
Okay.. I think i have to explain it a bit further...
Here is the html code:
<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />
When the button is pressed, some data should be send to the php script that generates the picture. A Callback function or something similar should now post the picture into the img- element.
Simply posting the Picture into the img tag doesnt work. The following code would work, but how can i add POST params??
<img src="<scriptname>.php" />
Http POST requests aren't meant to return resources. Why don't you use a GET request? The 'REST' way to do it will be to create the image with a POST request and then load it with a GET request. You need to define a URL mapping for your resources.
No people! You basically have 3 options as I see it.
Method 1 - Inline the image
Do what Brayn said, but data should be a base64 encoding of your image.
$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this
But I don't like the idea of inlining the image or passing post data. Base64 might get a bit large for big images too.
Method 2 - Save the image
You can $.post the data like before, then save the image, and return the URL of the image.
Method 3 - Use GET
Modify your image-generating script to accept GET data. If you have a lot of data to pass, try compressing it somehow, or perhaps you can use SESSION variables.
I'm not very sure if I got it right from what you said but you could use the $.post() method that would return whatever you need through its callback. Something like this:
$.post("file.php",{param: val},function(data){
$("#div").html(data);
})
If you could explain further maybe we'll understand better. Hope this helps.
Is there any actual need to use AJAX / jQuery? Or are you simply putting it in because it's cool?
Here's what I would do:
if (isset($_POST['createImage'])){
// This means that the button was clicked
// Generate your image, and then display it:
}
// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.
This way, you achieve your desired output (the graphic loading depending on the form output) and a single click to generate that output.