croppieでトリミングした画像を保存する方法

トリミングした画像をアップロードしたいと思い、以下のコードを作成しました。

jQuery
1//選択した画像を表示
2$('#myfile').on('change', function () { 
3  var reader = new FileReader();
4  reader.onload = function (e) {
5    $uploadCrop.croppie('bind', {
6      url: e.target.result
7    }).then(function(){
8    	console.log('jQuery bind complete');
9    });			
10  }
11  reader.readAsDataURL(this.files[0]);
12});
13
14//画像をトリミングし、結果を表示
15$('#cropimage').on('click', function() {
16  $uploadCrop.croppie('result', {
17    type: 'base64',
18    format: 'png',
19    size: { width: 300, height: 300 }
20  }).then(function (resp) {
21      $('#upload-image').attr('src', resp);
22      $('#profileimage').val(resp);
23      $('#cropImagePop').modal('hide');
24  });
25});
26
27//表示した結果を"確認.php"で取得
28$('.btn').on('click', function (ev) {
29  $uploadCrop.croppie('result', {
30      type: 'canvas',
31      size: 'viewport'
32  }).then(function (resp) {
33      $.ajax({
34          url: "./確認.php",
35          type: "POST",
36          data: {"image":resp},
37          success: function (data) {
38            var response = data.split(",");
39            var html;
40            if(response[0] != "Error"){
41              html = '<img id="cropresult" style="margin: 0px;" src="' + response[1].trim() + '" />';
42              $("#uploaded-input").html(html);
43            } else {
44              console.log(data);
45            }
46          }  
47      });
48  });
49});

php
1<?php
2  $data = $_POST['image'];
3  list($type, $data) = explode(';', $data);
4  list(, $data)      = explode(',', $data);
5  $data = base64_decode($data);
6  $imageName = time().'.png';
7  if(file_put_contents('images/'.$imageName, $data)){
8    echo "Success, " . $imageName;
9  } else {
10    echo "Error, unable to Put file.";
11  }
12?>
13
14
15<!DOCTYPE html>
16<html lang="ja">
17  <head>
18    <meta charset="UTF-8" />
19    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
20    <title>確認</title>
21  </head>
22  <body>
23    <img src="<?php echo "{$data}"; ?>" style="width:300px;height:300px;" />
24  </body>
25</html>

imagesディレクトリに編集したpngファイルは保存されるのですが、
成功するのは稀で、殆どは「現在サポートされていない形式であるか、ファイルが破損しているため、フォトでこのファイルを開くことができません。」とでます。
また、"確認.php"では画像が表示されず、つねに「Error, unable to Put file.」
と表示されています。

Apacheのエラーログを見ると
「Undefined array key "image" in
確認.php on line 8, referer: http://localhost/確認.php
Undefined array key 1 in
確認.php on line 9, referer: http://localhost/確認.php
Undefined array key 1 in
確認.php on line 10, referer: http://localhost/確認.php」
とのことです。

データベースへの保存は後にして、先にこの問題を解決したいと思っております。
アドバイスしていただけると助かります。

バージョン
PHP Version 8.0.8
jQuery-3.6.0

FKM

2021/12/20 05:30

使用環境にphp_gdがインストールされているかチェックしてください。

退会済みユーザー

2021/12/20 10:17 編集

php.iniを確認してみたところ、 php_gdがインストールされていなかったので、インストールしてみました。現在は『PNG Support: enabled』になっております。ちなみにバージョンは PHP Version 8.0.8 です。質問文に記入していなかったので、編集しておきます。～追記～インストール後に再度実行してみましたが、やはり失敗します。関係あるかは分かりませんが、エラーログでは「... on line 8... on line 9 ...on line 10..」のところが「... on line 2... on line 3 ...on line 4..」に変わっていました。

行動規範の内容に同意します

回答1件

ベストアンサー

自己解決したので、記入させていただきます。
htmlのファイルで

<form enctype="multipart/form-data" action="./確認.php" method=**"POST"**> と、上記の …$.ajax({ url: "./確認.php", type: **"POST"**, data: {"image":resp},… と"POST"が二重に入力されており、どうやらこれが原因でうまく保存できなかったようです。

またFKMさんがご指摘されたphp_gdもなければ、解決しなかったと思われます。
ありがとうございました。

投稿2021/12/23 10:24

編集2021/12/23 10:26

退会済みユーザー

総合スコア0