我想弄清楚的是,在完全处理PHP脚本后,如何在iframe中打开链接(使用colorbox)。我需要在 php 脚本之后加载链接的原因是,在 php 脚本中,我从页面上的画布元素生成 png 图像。然后,此图像将用作后续页面上的图像。
我一直遇到的问题是,如果链接在 imagesave 脚本完成之前打开,链接将无法正常运行(即图像不会出现(第一次单击)或显示最后保存的图像而不是预期的图像)。
我在页面上使用Jquery和Colorbox。javascript将变量传递给php,php将它们存储在会话中。
我在主页上的 HTML 如下:
<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 功能图像保存:
<?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 $Session变量文件用于引用图像,如下所示:
<?php
echo '<div id="uimage"><img id="userimage" src="images/users/'.$_SESSION['file'].'.png"> </div>';
?>
任何关于如何完成这项工作的帮助或想法将不胜感激。我确实在 HTML 标记之前的每个页面上都有会话启动。
你为什么不尝试类似ajax请求的done函数,如下所示:
$.ajax({
type: "POST",
url: "featureimagesave.php",
data: {
imgBase64: dataURL,
yogatextcolor: txtcolorsel,
yogamatcolor: selmatcolor,
prefile: prefile,
name: matname,
price: priceCalc
},
}).done(function ( data ) {
//do your colorbox logic
});
这是jQuery的承诺回调和工作,我认为从jQuery 1.5开始,有关更多信息,您可以看到jquery的API http://api.jquery.com/jQuery.ajax/