如何在服务器上抓取图像并显示在 html 页面上？答案

【问题标题】：How do I grab an image on a server and display on a html page?如何在服务器上抓取图像并显示在 html 页面上？
【发布时间】：2013-10-15 12:21:20
【问题描述】：

我正在尝试获取已保存的画布以在我的 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：

<?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>

【问题讨论】：

你能创建一个 js fiddle 吗？
不，但我可以指导您找到工作模型scottiev.com/test/index2.html

标签： javascript php html canvas displayobject

【解决方案1】：

您的 PHP 已经返回在服务器上创建的 $file。

因此，您可以使用 jQuery 进行 POST 并添加一个回调，以接收在服务器上创建的唯一文件名（或者如果发生错误，则返回错误消息）。

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

【讨论】：