我有一个php代码(upload.php)，它允许用户从index.html上传图像，调整其大小，放置水印并将其显示在同一个index.html页面上。然后，用户可以通过"将图像另存为…"选项下载图像。调整大小的图像保存在图像/文件夹中。文件名与上载的文件保持相同。
有没有办法在index.html页面上放一个下载按钮，提示用户下载带水印的图像？我需要做哪些修改才能实现这一点？
index.html
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Process image</title>
<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link href="css/jquery.inputfile.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.inputfile.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
input[type=file], input[type=submit] {
cursor:pointer
}
</style>
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit', (function (e) {
$("#uploadForm").find('.progress-bar').removeClass('progress-bar-success')
.removeClass('progress-bar-danger');
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function (data)
{
$("#profileImage").html(data);
},
error: function ()
{
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded || e.position) * 100 / e.total;
//Do something with upload progress
console.log(percentComplete);
$("#uploadForm").find('.progress-bar').width(percentComplete + '%').html(percentComplete + '%');
}
}, false);
xhr.addEventListener('load', function (e) {
$("#uploadForm").find('.progress-bar').addClass('progress-bar-success').html('Finished uploading.');
});
return xhr;
}
});
}));
});
</script>
</head>
<body>
<div class="bgColor">
<form id="uploadForm" action="upload.php" method="post">
<div class="row " align="center">
<div class="col-sm-6 col-sm-offset-2">
<div id="profileImage"> <img src="blank.gif" class="img-thumbnail " width="300" height="300"/></div>
</div>
<div class="col-sm-6 col-sm-offset-2">
<div id="uploadFormLayer">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" /></br>
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
<div class="col-sm-6 col-sm-offset-2" style="margin-top:20px">
<div class="progress progress-striped active">
<div class="progress-bar" style="width:0%"></div>
</div></div>
</form>
</div>
<script>
$('input[type="file"]').inputfile({
uploadText: '<span class="glyphicon glyphicon-upload"></span> Select a file',
removeText: '<span class="glyphicon glyphicon-trash"></span>',
restoreText: '<span class="glyphicon glyphicon-remove"></span>',
uploadButtonClass: 'btn btn-primary',
removeButtonClass: 'btn btn-default'
});
</script>
<p style="text-align: center;">
<span style="color:#000000;">Once the image is processed, </span><span style="color:#800000;"><strong>save it to your device</strong></span><span style="color:#000000;">. After saving the image, click <a href="http://www.pronilhalder.com/p/photography.html">here</a> to go to </span><strong><span style="color:#ff0000;">Step 2</span></strong><span style="color:#000000;">.</span></p>
<p style="text-align: center;">
*Save it using '<strong>Save image as</strong>' option from the right click/long press context menu.</p>
</body>
</html>
upload.php
<?php
if (is_array($_FILES)) {
$target_dir = "images/";
$image_formats = array("jpg", "jpeg", "png", "gif"); //Image Formats
if (is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = $target_dir . $_FILES['userImage']['name'];
$size = $_FILES['userImage']['size'];
$ext = pathinfo($targetPath, PATHINFO_EXTENSION); // Get Image Extension
if (in_array($ext, $image_formats)) {
if ($size < (4096 * 4096)) { // Image size max 4 MB
$newWidth = 300;
$newHeight = 300;
$target = compressAndWatermark($sourcePath, $newWidth, $newHeight, $targetPath, $ext);
if ($target) {
?>
<img src="<?php echo $target; ?>" class="img-thumbnail" width="300" height="300" />
<?php
}
} else {
echo "Max. image size is 4 MB.";
}
} else {
echo "Image must be a jpg, png or gif.";
}
}
}
//Function for resize, compress and watermark to the images
function compressAndWatermark($tempFile, $newwidth, $newheight, $target, $ext) {
$uploadTempFile = $tempFile;
$watermark_png_file = 'watermark.png'; // Path of the watermark image
list( $width, $height, $uploadType ) = getimagesize($uploadTempFile);
if ($ext == "jpg" || $ext == "jpeg" || $ext == "JPEG" || $ext == "JPG") {
$srcImage = imagecreatefromjpeg($uploadTempFile);
$targetImage = imagecreatetruecolor($newwidth, $newwidth);
$k = 1;
} else if (($ext == "png") || ($ext == "PNG")) {
$srcImage = imagecreatefrompng($uploadTempFile);
$targetImage = imagecreatetruecolor($newwidth, $newwidth);
$white = imagecolorallocate($targetImage, 255, 255, 255); // To make the png images background white.
imagefilledrectangle($targetImage, 0, 0, $width, $height, $white); // Fill the background with white.
$k = 2;
} else if ($ext == "gif" || $ext == "GIF") {
$srcImage = imagecreatefromgif($uploadTempFile);
$targetImage = imagecreatetruecolor($newwidth, $newwidth);
$white = imagecolorallocate($targetImage, 255, 255, 255);
imagefilledrectangle($targetImage, 0, 0, $width, $height, $white);
$k = 3;
}
imagecopyresampled($targetImage, $srcImage, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
//Calculte the centre position of the images to watemark it.
$watermark_left = ($newwidth / 2) - (300 / 2); //watermark left
$watermark_bottom = ($newheight / 2) - (40 / 2); //watermark bottom
$watermark = imagecreatefrompng($watermark_png_file); //watermark image
// Use imagecopy() to merge two images
imagecopy($targetImage, $watermark, $watermark_left, $watermark_bottom, 0, 0, 300, 40); //merge image
if ($k = 1) {
imagejpeg($targetImage, $target, 100);
} else if ($k = 2) {
imagepng($targetImage, $target, 9);
} else if ($k = 3) {
imagepng($targetImage, $target);
}
// Free up the memory
imagedestroy($targetImage);
return $target;
}
?>
你可以在这里看到工作的index.html页面
更新：我自己解决了这个问题。我刚刚创建了另一个名为download.php 的php文件
<?php
if(isset($_REQUEST["file"])){
// Get parameters
$file = urldecode($_REQUEST["file"]); // Decode URL-encoded string
$filepath = "images/" . $file;
// Process download
if(file_exists($filepath)) {
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.basename($filepath).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($filepath));
flush(); // Flush system output buffer
readfile($filepath);
exit;
}
}
?>
然后在update.html 中添加以下行
$filename = $_FILES['userImage']['name'];
echo '<br><p><a href="download.php?file=' . urlencode($filename) . '">Save image</a></p>';
请参阅类似问题的答案。也就是说，重定向到：
<a href="data:text/url,my_image.jpg" target="_blank">