This is my first post, so excuse my lack of knowledge in certain areas.
I am trying to send a base64 image to a php page. It works fine on my testing localhost, but not on the server once I upload it.
I have a canvas element that allows the user to draw, then save the image. Once the image is saved to the div id="result", I then use jquery to paste the div inside the value of a hidden input field, then submit the form to my canvas.php page. Code here:
<script type="text/javascript">
$(document).ready(function() {
$('#canvasform').submit(function(){
$('#pass_result').val(
$('#result').html()
);
});
});
<script>
<body>
<canvas id="thecanvas" width="800" height="400"></canvas>
<form action="canvas.php" method="post" id="canvasform"/>
<input type="hidden" name="pass_result" id="pass_result" /><br />
<input type="button" id="save" value="Save Image"><br>
<input type="submit" />
</form>
<div id="result"></div>
</body>
This works fine when I view the page on my localhost. But once I upload the files and view the page, it does not show the image properly on the canvas.php. When on localhost, I can right click on the image and view in new tab.
The url reads: data:image/png;base64,iVBORw0KGg... When on server, I right click and view in new tab. The url reads: http://mydomain.com/%22data:image/png;base64,iVBORw0KGg... and gives me a 414 Request-URI Too Large error.
Any thoughts on why this does not display the image properly?
canvas.php:
<?php
$thediv = $_POST['pass_result'];
echo "Hello $thediv";
?>
