0

我在同一个元素上使用了两个函数，一个是用于保存图片的 AJAX，第二个是用于显示该图片的 prettyPhoto ajax 这里是示例

这是事件

> <a rel="prettyPhoto[ajax]" onClick="return false"
> onMouseDown="javascript:capture();"
> href="xhr_response.php?ajax=true&width=1100&height=482"><img
> src="img/assets/zoom2.png"></a>

这里我初始化了 prettyPhoto

$(document).ready(function(){ 
    $("a[rel^='prettyPhoto']").prettyPhoto({ social_tools:false, }); 
});

这是我保存图像的捕获功能

function capture() {
    $('#zoomTarget').html2canvas({
        onrendered: function (canvas) {
            var url = "ajax.php";
            var imgSrc = canvas.toDataURL();
            $.post(url, {contentVar: imgSrc } ,function(data) {});
        }
    });
}

一切都很好，但问题是我需要一些时间来保存图像，而 prettyPhoto 加载图像的速度如此之快，这意味着，当用户单击元素时，第一次没有加载正确的图像，需要时间来相同的图像，在第二次或第三次正确的图像显示正常，如何prevet prettyPhoto 等待图像被保存？

这是ajax.php

$contentVar = $_POST['contentVar'];
$filteredData=substr($contentVar, strpos($contentVar, ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
4

1 回答 1

0

在保存图片的回调函数中重新加载图片：

function capture() {
    $('#zoomTarget').html2canvas({
        onrendered: function (canvas) {
            var url = "ajax.php";
            var imgSrc = canvas.toDataURL();
            $.post(url, {contentVar: imgSrc }, function(data) {
                // load new image here
                // ??? xhr_response.php?ajax=true&width=1100&height=482 ???
            });
        }
    });
}
于 2013-10-11T06:37:56.417 回答