Question

我在同一元素上使用两个函数，一个是用于保存图片的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) {});
        }
    });
}

一切都很好，但问题是我需要一些时间来保存图像，而且漂亮的照片正在加载图像这么快，这意味着，当用户点击元素时，第一次没有加载正确的图像，需要时间相同的图像，在第二次或第三次正确的图像显示正常，如何预备漂亮的照片等待图像保存？

，这是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);

Answer 1

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

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 ???
            });
        }
    });
}

如何超时href？

1 个答案: