如何使用CodeIgniter Imagick将图像从控制器传递到视图

Question

我使用CodeIgniter php，并使用Imagick进行一些图像操作。现在我想上传图像，在图像处理后，例如图像均衡，我想将均衡后的图像从控制器传递或加载到视图。图像被均衡并上传到一个路径，但我无法将输出的均衡图像加载到查看页面。那么，请指导如何处理这个问题？

控制器代码：

class Equalize extends CI_Controller { 
public function equalize_image() { 
if (isset($_FILES["userfile"])) {
$tmpFile = $_FILES["userfile"]["tmp_name"];
$ext = pathinfo($_FILES["userfile"]["name"], PATHINFO_EXTENSION);
$fileName = uniqid(rand(), true) . "." . $ext;
list($width, $height) = getimagesize($tmpFile);
if ($width == null && $height == null) {
header("Location: index.php");
return;
}
$image = new Imagick($tmpFile);
$image->equalizeImage();
$image->writeImage(FCPATH.'/assets/images' . "/" . $fileName);
header("Content-Type: image/jpeg");
echo $image;    
}
}
}  

查看代码：

<label>Input Image</label>
<form method="post" id="upload_form" enctype="multipart/form-data">
<input type='file' name="userfile" size="20" onchange="readURL(this);"/>
<label>Orignal Image</label><br>
<img id="blah" src="#" alt="" />
<label>Equalized Image </label>
<div id="result">
</div>
<input type="submit" name="upload" id="upload" value="Apply" class="btn btn-info" />
</form>   
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(200)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function(){  
$('#upload_form').on('submit', function(e){  
e.preventDefault();  
if($('#userfile').val() == '')  
{  
alert("Please Select the File");  
}  
else  
{  
$.ajax({  
url:"<?php echo base_url(); ?>Equalize/equalize_image",   
//base_url() = http://localhost/tutorial/codeigniter  
method:"POST",  
data:new FormData(this),  
contentType: false,  
cache: false,  
processData:false,  
success:function(data)  
{  
$('#result').html(data);

}  
});  
}  
});  
});  
</script>
</body>

使用此代码，我将面临以下输出：https://i.stack.imgur.com/yrSKN.jpg.如何加载视图中的图像？

Answer 1

取1

只需通过json将新创建的图像url传递给ajax成功函数，并将img src修改为该url。

HTML:

<label>Input Image</label>
<form method="post" id="upload_form" enctype="multipart/form-data">
<input type='file' name="userfile" size="20" onchange="readURL(this);"/>
<label>Orignal Image</label><br>
<img id="blah" src="#" alt="" />
<label>Equalized Image </label>
<div id="result">
<img src="http://via.placeholder.com/300x400">
</div>
<input type="submit" name="upload" id="upload" value="Apply" class="btn btn-info" />
</form>   
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(200)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function () {
$('#upload_form').on('submit', function (e) {
e.preventDefault();
if ($('#userfile').val() == '')
{
alert("Please Select the File");
} else
{
$.ajax({
url: "<?php echo base_url(); ?>Equalize/equalize_image",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function (data)
{
if (data.success == true) {
$('#result').find('img').attr('src', data.file);
} else {
alert(data.msg);
}
}
});
}
});
});
</script>
</body>

PHP:

try {
if (!isset($_FILES["userfile"])) {
throw new Exception('No file uploaded.');
}
$tmpFile = $_FILES["userfile"]["tmp_name"];
$ext = pathinfo($_FILES["userfile"]["name"], PATHINFO_EXTENSION);
$fileName = uniqid(rand(), true) . "." . $ext;
list($width, $height) = getimagesize($tmpFile);
if ($width == null && $height == null) {
throw new Exception('An error occured.');
}
$image = new Imagick($tmpFile);
$new_file = "assets/images/{$fileName}";
$image->equalizeImage();
$image->writeImage(FCPATH . '/' . $new_file);
echo json_encode(array('success' => true, 'file' => base_url($new_file)));
} catch (Exception $e) {
echo json_encode(array('success' => false, 'msg' => $e->getMessage()));
}

---

取2

这是在不将文件保存在服务器上的情况下下载文件的唯一方法。

class Test extends CI_Controller {
public function index() {
$this->load->view('test');
}
public function eq() {
try {
if (!isset($_FILES['userfile'])) {
throw new Exception('No file uploaded.');
}
$file_error = $_FILES['userfile']['error'];
if ($file_error !== 0) {
throw new Exception('Error uploading: Code ' . $file_error);
}
$tmp_file = $_FILES['userfile']['tmp_name'];
list($width, $height) = getimagesize($tmp_file);
if ($width == null && $height == null) {
throw new Exception('An error occured.');
}
$image = new Imagick($tmp_file);
$image->equalizeImage();
$encoded_file = base64_encode($image->getimageblob());
echo json_encode(array('success' => true, 'type' => $image->getimageformat(), 'file' => $encoded_file));
} catch (Exception $e) {
echo json_encode(array('success' => false, 'msg' => $e->getMessage()));
}
}
public function download() {
$contents = $this->input->post('image_contents');
$extension = $this->input->post('extension');
if (is_null($contents) || is_null($extension)) {
show_error('Image contents empty');
}
$name = 'equalized_image.' . strtolower($extension);
$contents = base64_decode($contents);
$this->load->helper('download');
force_download($name, $contents);
}
}

HTML:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#original-image')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function () {
$('#download').hide();
$('#upload_form').on('submit', function (e) {
e.preventDefault();
if ($('#userfile').val() == '')
{
alert("Please Select the File");
} else
{
$.ajax({
url: "/neou_cms/test/eq",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function (data)
{
console.log(data);
if (data.success == true) {
var image_content = 'data:image/' + data.type + ';base64,' + data.file;
$('#eq-image').attr('src', image_content);
$('#image_contents').attr('value', data.file);
$('#extension').attr('value', data.type);
$('#download').show();
} else {
alert(data.msg);
}
}
});
}
});
});
</script> 
</head>
<body>
<form method="post" id="upload_form" enctype="multipart/form-data">
<table border="1">
<tr>
<td colspan="2"><input type="file" name="userfile" size="20" onchange="readURL(this);"></td>
</tr>
<tr>
<td>Original Image</td>
<td>Equalized Image</td>
</tr>
<tr>
<td>
<img id="original-image" src="http://via.placeholder.com/300x400" width="300" height="auto">
</td>
<td>
<img id="eq-image" src="http://via.placeholder.com/300x400" width="300" height="auto">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="upload" id="upload" value="Apply" class="btn btn-info">
</td>
</tr>
</table>  
</form>
<form method="post" action="/neou_cms/test/download">
<input type="hidden" value="" name="image_contents" id="image_contents">
<input type="hidden" value="" name="extension" id="extension">
<input type="submit" name="download" id="download" value="Download Image">
</form>
</body>
</html>