Как захватить изображение на сервере и отобразить его на странице html?

Question

Я пытаюсь получить холст, который я сохранил, чтобы появиться в моем html-окне. Не уверен, как захватить его на странице html, поскольку сохранение создает случайное имя для изображения.

Сохранить код:

function saveImage() { 
cursor.visible = false; stage.update(); 
var canvasData = testCanvas.toDataURL("image/png"); 
window.open(("../popup.html")); 
var xmlHttpReq = false;  
if (window.XMLHttpRequest) { 
ajax = new XMLHttpRequest(); 
cursor.visible = true; stage.update(); 
} 

else if (window.ActiveXObject) { 
ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
alert (nameOfFile); 
ajax.open('POST', 'testSave.php', false); 
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
ajax.onreadystatechange = function() { 
console.log(ajax.responseText); 
} 
ajax.send("imgData="+canvasData); 
} 

РНР:

<?php 
// requires php5 
define('UPLOAD_DIR', 'images/'); 
$img = $_POST['img']; 
$img = str_replace('data:images/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = UPLOAD_DIR . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

popup.html

<div><strong>Image to display below</strong></div> 

<script> 
window.onload = function() { 
document.getElementById('imgData="+canvasData').src = localStorage.getItem('images/'); 
}; 
</script> 

Answer 1

Вашего PHP уже возвращенный $ файл, который был создан на сервере ,

Итак, вы можете использовать POST с jQuery и добавить обратный вызов, который получает это уникальное имя файла, созданное на сервере (или сообщение об ошибке, если возникла ошибка).

// create a dataUrl from the canvas 
var dataURL= canvas.toDataURL(); 

// post the dataUrl to php 
$.ajax({ 
    type: "POST", 
    url: "upload.php", 
    data: {image: dataURL} 
}).done(function(respond) { 
    // you will get back the temp file name 
    // or "Unable to save this image." 
    console.log(respond); 
});