Перезагрузить изображение без перезагрузки страницы?
Я делаю это как учебное упражнение, и я все еще новичок в PHP. Я знаю еще меньше о javascript:
Сценарий, который я пишу, должен позволять пользователю загружать изображение со своего жесткого диска, позволять пользователю изменять его с помощью некоторых элементов управления на странице и затем отображать измененное изображение.
В настоящее время я использую только PHP для этого, и он требует, чтобы пользователь установил параметры элементов управления, а затем POST их (требующий полной перезагрузки страницы). Может кто-нибудь указать мне в направлении лучшего способа сделать это? Есть ли что-нибудь подобное, на что я мог бы взглянуть?
Было бы здорово, если бы я смог обновить изображение в реальном времени, когда пользователь перемещает элемент управления. Я ищу javascript? AJAX?
Вот основная версия моего кода:
<?php session_start(); ?>
<html>
<head>
<script>
<?php
if(isset($_POST['upload_submit'])) { // PROCESS UPLOAD FORM//////////////////////////////////////////////////////
$tmp_file = $_FILES['file_upload']['tmp_name'];
$filename = basename($_FILES['file_upload']['name']);
$_SESSION['file_name'] = $filename; // load filename into SESSION so that it survives page reloads from POST
move_uploaded_file($tmp_file, $filename);
}
if(isset($_POST['process_submit'])){ // PROCESS CONTROL FORM//////////////////////////////////////////////////////
$im = imagecreatefromjpeg($_SESSION['file_name']);
imagefilter($im, IMG_FILTER_COLORIZE, $_POST['colred'], $_POST['colgreen'], $_POST['colblue'], $_POST['colalpha']);
imagejpeg($im, "newimage.jpg"); //output to file
imagedestroy($im); // free memory
$_SESSION['Modified'] = TRUE; // flag that the image has been modified so that the page will display newimage.jpg instead of original
}
?>
</script>
</head>
<body>
<?php
if(isset($_SESSION['Modified'])){ // Image has been modified at least once (display modified image. do not display upload form)
echo("<img src='newimage.jpg' width='400px'><br />");
}elseif(isset($_FILES['file_upload']['name'])) { // Image has been uploaded but not yet modified (do not display upload form)
echo("<img src=$filename . ' 'width=400px'><br />");
} else { // FIRST State that the form is in when the page is loaded. (No image uploaded so display upload form)
echo("<form action='index.php' enctype='multipart/form-data' method='POST'>
<input type='file' name='file_upload' />
<input type='submit' name='upload_submit' value='Upload' />
</form>");
}
echo("<form action='index.php' method='post'><br />"); // display form with 4 slider controls (Red, Green, Blue, Alpha) and a submit button
echo("<table>");
echo (isset($_POST['colred'])) ? "<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255' value=" . $_POST['colred'] . ">255</td></tr>":"<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colgreen'])) ? "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255' value=" . $_POST['colgreen'] . ">255</td></tr>": "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colblue'])) ? "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255' value=" . $_POST['colblue'] . ">255</td></tr>": "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colalpha'])) ? "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value=" . $_POST['colalpha'] . ">127</td></tr>": "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value='127'>255</td></tr>";
echo("</table>");
echo("<button name='process_submit'>Process</button>");
echo("</form>");
?>
</body>
</html>
Решение
Вы, вероятно, можете делать все, что вы хотите без всех элементов управления формы PHP.
HTML5 добавил
<canvas></canvas>
элемент, в который вы можете помещать изображения и управлять ими напрямую с помощью JavaScript. Затем вы можете отправить эти данные в фоновом режиме в PHP, чтобы сохранить изображение для хранения или загрузки или что-то еще.
Увидеть http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ для некоторых примеров фильтров изображений, написанных на JavaScript. Вы также можете легко обрезать, вращать, масштабировать и т.д. с помощью JavaScript и холста.
Другие решения
Перезагрузка изображения не так сложна по сравнению с процессом загрузки. Забыв о загрузке, вы можете использовать javascript для редактирования атрибута src элемента, чтобы сделать перезагрузку изображения.
лайк:
document.getElementsByTagName («Image1») [0] .setAttribute («src», «http://media-cache-ak0.pinimg.com/736x/63/50/59/635059d03e7f3a00219571c767b89c38.jpg«);