How to have an href process in an iframe (colorbox) after running a php
script?
What I am trying to figure out is how to have a link open in an iframe
(using colorbox) after a php script has been fully processed. The reason I
need to have the link load after the php script is that in php script I
generate a png image from a canvas element on the page. This image is then
used as the image on the subsequent page.
The issue I have been having is that if the link opens prior to the
completion of imagesave script the link will not function correctly (ie
the image will not appear (first time clicked) or the last image saved
will appear rather then the intended image).
I am using Jquery and Colorbox on the page. The javascript passes the
variables to the php which stores them in a session.
My HTML on the main page is as follows:
<script>
$(document).ready(function(){
$(".share").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>
<canvas id="YourYogaMatCanvas" width="888" height="288" >Your browser
does not support the HTML5 canvas tag.</canvas><br/>
<a href="featureshare" class="share" id="sharing"
onclick="savetoserver();">Share Your Creation Now</a><br/><br/>
JavaScript:
function savetoserver() {
canvas = document.getElementById('YourYogaMatCanvas');
var dataURL = canvas.toDataURL();
var dataURL2 = canvas.toDataURL();
do {
dataURL = canvas.toDataURL();
dataURL2 = canvas.toDataURL();
$.ajax({
type: "POST",
url: "featureimagesave.php",
data: {
imgBase64: dataURL,
yogatextcolor: txtcolorsel,
yogamatcolor: selmatcolor,
prefile: prefile,
name: matname,
price: priceCalc
},
});
}while (dataURL != dataURL2);
}
PHP featureimagesave:
<?php
session_start();
// requires php5
define('UPLOAD_DIR', 'images/users/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$filename = uniqid();
$file = UPLOAD_DIR . $filename . '.png';
$success = file_put_contents($file, $data);
$_SESSION['file'] = $filename;
$_SESSION['textcolor'] = $_POST['yogatextcolor'];
$_SESSION['matcolor'] = $_POST['yogamatcolor'];
$_SESSION['featurefile'] = $_POST['prefile'];
$_SESSION['name'] = $_POST['name'];
$_SESSION['price'] = $_POST['price'];
?>
HTML on featureshare page the $Session variable file is used to reference
the image as follows:
<?php
echo '<div id="uimage"><img id="userimage"
src="images/users/'.$_SESSION['file'].'.png"> </div>';
?>
Any help or an idea of how to make this work would be greatly appreciated.
I do have session start on every page prior to the HTML tag.
No comments:
Post a Comment