如何使用带有数据的ajax重定向php页面？
我知道这里有很多与我的标题相同的问题，但我无法使用为他们提供的答案来解决我的问题。
该程序应该在截取谷歌地图的屏幕截图后将页面重定向到OCR结果。发生的事情是，我只能通过网络>过程.php >预览来查看结果。
我也尝试在ajax上使用，但它只会导致页面出现很多错误，因为缺少数据。
以下是索引.phpwindow.location.href = "your-url-to-redirect-to";
<body>
<input type='button' class="btn btn-success" id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<script type="text/javascript">
function screenshot() {
var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform");
var comp = transform.split(",")
var mapleft = parseFloat(comp[4])
var maptop = parseFloat(comp[5])
$(".gm-style>div:first>div:first>div:last>div").css({
"transform":"none",
"left":mapleft,
"top":maptop,
});
html2canvas(document.getElementById('map'), {
useCORS: true
}).
then(function(canvas) {
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
$.ajax({
url: 'processing.php',
type: 'post',
data: {image: base64URL},
success: function(data){
console.log('Upload successfully');
}
});
}
);
}
</script>
</body>
这是processing.php
<?php
// upload screenshot
$image = $_POST['image'];
$location = "uploads/";
$image_parts = explode(";base64,", $image);
$image_base64 = base64_decode($image_parts[1]);
$filename = "screenshot_".uniqid().'.png';
$file = $location . $filename;
file_put_contents($file, $image_base64);
// end
元芳怎么了1回答
-
慕后森
我知道这里有很多与我的标题相同的问题，但我无法使用为他们提供的答案来解决我的问题。该程序应该在截取谷歌地图的屏幕截图后将页面重定向到OCR结果。发生的事情是，我只能通过网络>过程.php >预览来查看结果。我也尝试在ajax上使用，但它只会导致页面出现很多错误，因为缺少数据。以下是索引.phpwindow.location.href = "your-url-to-redirect-to";<body><input type='button' class="btn btn-success" id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/><script type="text/javascript"> function screenshot() { var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform"); var comp = transform.split(",") var mapleft = parseFloat(comp[4]) var maptop = parseFloat(comp[5]) $(".gm-style>div:first>div:first>div:last>div").css({ "transform":"none", "left":mapleft, "top":maptop, }); html2canvas(document.getElementById('map'), { useCORS: true }). then(function(canvas) { var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'); $.ajax({ url: 'processing.php', type: 'post', data: {image: base64URL}, success: function(data){ console.log('Upload successfully'); } }); } ); }</script></body>这是processing.php<?php// upload screenshot$image = $_POST['image'];$location = "uploads/";$image_parts = explode(";base64,", $image);$image_base64 = base64_decode($image_parts[1]);$filename = "screenshot_".uniqid().'.png';$file = $location . $filename;file_put_contents($file, $image_base64);// enduploadToApi($file);function uploadToApi($target_file){ require __DIR__ . '/vendor/autoload.php'; $fileData = fopen($target_file, 'r'); $client = new \GuzzleHttp\Client(); try { $r = $client->request('POST', 'https://api.ocr.space/parse/image',[ 'headers' => ['apiKey' => '[API_KEY]'], 'multipart' => [ [ 'name' => 'file', 'contents' => $fileData ] ] ], ['file' => $fileData]); $response = json_decode($r->getBody(),true); if(empty($response['ErrorMessage'])) {?><html> <head> <title>Result</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js'></script> </head> <body> <div class="form-group container"> <label for="exampleTextarea">Result</label> <textarea class="form-control" id="exampleTextarea" rows="30"> <?php foreach($response['ParsedResults'] as $pareValue) { echo $pareValue['ParsedText']; } ?></textarea> </div> </body></html><?php } else { header('HTTP/1.0 400 Forbidden'); echo $response['ErrorMessage']; } } catch(Exception $err) { header('HTTP/1.0 403 Forbidden'); echo $err->getMessage(); }}?>
随时随地看视频慕课网APP
PHP