我无法使用 GD 操作上传的图像
Posted
技术标签:
【中文标题】我无法使用 GD 操作上传的图像【英文标题】：I can't manipulate an uploaded image with GD 【发布时间】：2014-07-01 22:08:39 【问题描述】：我正在尝试允许用户上传具有任何高度/宽度的图像，然后在我的页面上显示该图像，裁剪为 400 x 400 正方形。我尝试这样做的方法是获取上传图像的 URL，通过 GET 将其发送到我的 php 脚本，然后将新的 img 标签添加到包含调整大小的图像的 DOM。
我遇到的问题是裁剪后的图像始终是黑色的，即使使用 imagecopyresampled() 也是如此。这是直播example。
我的 html：
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1'>
<title>Test</title>
<!-- styles -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<!-- scripts -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='js/script.js'></script>
</head>
<body>
<label for='existing'>Choose existing photo:</label>
<input id="existing" type="file" accept="image/*">
<div id="photo_container">
<img id="photo" src="" >
</div>
</body>
</html>
我的 JS：
$(document).ready(
function()
var showPicture = document.querySelector("#photo");
var takePicture = document.querySelector("#existing");
takePicture.onchange = function( event )
var files = event.target.files, file;
if (files && files.length > 0)
file = files[0];
try
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(file);
showPicture.src = imgURL;
$('#photo_container').append('<img id="photo_new" src="http://andrewtgibsongraphics.com/upload_test/crop.php?source='+imgURL+'"/>');
catch(e)
try
var fileReader = new FileReader();
fileReader.onload = function (event)
showPicture.src = event.target.result;
$('#photo_container').append('<img id="photo_new" src="http://andrewtgibsongraphics.com/upload_test/crop.php?source='+imgURL+'"/>');
;
fileReader.readAsDataURL(file);
catch(e)
var error = document.querySelector("#error");
if (error)
error.innerHTML = "Neither createObjectURL or FileReader are supported";
;
);
我的 PHP：
$source = $_GET['source'];
header('Content-type: image/jpeg');
list($width, $height) = getimagesize($source);
$myImage = imagecreatefromjpeg($source);
$newImage = imagecreatetruecolor(400,400);
imagecopyresampled($newImage, $myImage, 0, 0, 0, 0, 400, 400, $width, $height);
imagejpeg($newImage);
imagedestroy($newImage);
imagedestroy($myImage);
【问题讨论】：
传递给 PHP 的 URL 是一个blob URL，仅在 javascript 中有效。 PHP 不知道如何处理它。您需要将整个图像上传到服务器才能完成这项工作。在任何情况下，您都可以在 Javascript 中完成这一切，除非您出于其他原因需要上传图像。查看 Canvas 元素。
谢谢，迈克。我修改了代码，现在它获取上传的图像并尝试将图像放置在宽度和高度的一半的画布上。然后，我将该画布转换为 URL，并将其分配为不同图像元素的 src。还是不行。
【参考方案1】：
URL.createObjectURL method 为实际上尚未上传的文件创建一个临时 URL 以在浏览器中使用。因此，这个 URL 对于在远程服务器上运行的 PHP 代码将完全没有意义。
MDN 有a quite thorough tutorial of the API you are using here，讨论图片上传前如何显示，以及如何异步上传。
【讨论】：
以上是关于我无法使用 GD 操作上传的图像的主要内容，如果未能解决你的问题，请参考以下文章
尝试使用 node.js 和 GD 或 imagemagick 访问和操作图像