ユーザーが入力した画像からデータを取得しようとしたときに、同じ問題が発生しました。
問題は、base64 でコード化された文字列を入力フィールドに格納したことです。データ入力フィールドに保持できるデータ量には何らかの制限がある可能性があります。
入力フィールドの代わりにテキストエリアを使用したところ、コードは問題なく動作しました!
これを試してください:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Get data from textarea
$data = $_POST['image'];
$data = explode("base64,", $data);
// Decode the string
$data = base64_decode($data[1]);
$im = imagecreatefromstring($data);
if ($im !== false) {
// Saves file
imagejpeg($im, 'image.jpg');
imagedestroy($im);
}
else {
// Show errors
echo 'An error occurred.';
}
}
?>
<!doctype html>
<html>
<head>
<title>Image</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="" id="image-preview" style="width: 400px;" alt="">
<form action="" method="post">
<textarea name="image" id="image"></textarea>
<input type="submit" value="Make Image">
</form>
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
// Get's the data from file field and shows it in img tag
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function(oFREvent) {
document.getElementById("image-preview").src = oFREvent.target.result;
$("textarea").text(oFREvent.target.result);
};
};
</script>
</body>
</html>