画像アップロードフォームを作りたい。
しかし、現在はスマホの画質が良すぎるためアップロードに時間がかかる。
ということで、一旦javascriptで縮小してからアップロードするという方法にする。

jqueryを読み込んである前提で以下をコピペ


<script src="/js/load-image.all.min.js"></script>

<script>
    $(function () {




        $(document).on('change', '#img', function() {


            // 選択中のファイルの一つ目
            var file = this.files[0];
            // ファイルを選択しなかった場合
            if(!file) return;


            // ファイル形式の中にimageが含まれない場合
            if(!/image/.test(file.type)) {
                alert('画像を選択してください。');
                return;
            }

            // 読み込み用の関数で読み込み完了時に、HTMLにcanvas追加
            load(file, function(canvas) {

//                再度アップロードした場合は一旦削除する
                $("#dst canvas").remove();

                dst.appendChild(canvas);
                var base64 = $(canvas).get(0).toDataURL('image/jpeg');
                // base64からBlobデータを作成
                var barr, bin, i, len;
                bin = atob(base64.split('base64,')[1]);
                len = bin.length;
                barr = new Uint8Array(len);
                i = 0;
                while (i < len) {
                    barr[i] = bin.charCodeAt(i);
                    i++;
                }
                blob = new Blob([barr], {type: 'image/jpeg'});

                var name, fd = new FormData();

                fd.append('social_id',"999"); // ファイルを添付する
                fd.append('img', blob); // ファイルを添付する


                $("#upload").hide();




                $.ajax({
                    url: "/hoges/add/", // 送信先
                    type: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false
                })
                    .done(function( data, textStatus, jqXHR ) {
                        alert("送信完了");

                        $("#upload").show();
                        $('#dst').hide();




                    })
                    .fail(function( jqXHR, textStatus, errorThrown ) {
                        // 送信失敗
                        console.log("失敗");
                    });




            });

        });


        function load(file, callback) {


            // canvas: true にすると canvas に画像を描画する(回転させる場合は必須オプション)
            var options = {
                maxHeight: 600,
                maxWidth: 600,
                canvas: true
            };

            loadImage.parseMetaData(file, function (data) {
                if (data.exif) {
                    options.orientation = data.exif.get('Orientation');
                }

                $('#dst').show();

                // 画像の読み込み。完了時に callback が呼び出される
                loadImage(file, callback, options);
            });
        }
    });
</script>
















<div id="upload">

    <div id="dst" style="display: none;"></div>
        <!-- ファイル選択ボタン -->
        <?php echo $this->Form->create($valid, ['type' => 'file']); ?>
        <div id="upload-btn">
            <?php echo $this->Form->input('img', [
                'label' => '画像を選んで確認',
                'type' => 'file',
            ]); ?>
        </div>
        <?php echo $this->Form->input('social_id', [
            'value' => 999,
            'type' => 'hidden'
        ]); ?>
        <?php echo $this->Form->end(); ?>

</div>

送信先の hogescontoroller/add


    public function add()
    {

        pr($this->request->data);//第二引数に cron を入れれば cron用ログに書き出す

        $this->autoRender = false;
    }

結果


/var/www/html/twi.ski/plugins/Okws/src/Controller/DebugsController.php (line 50)
2018-05-24 16:02:27 Debug: Array
(
    [social_id] => 999
    [img] => Array
        (
            [tmp_name] => /tmp/phpMQledW
            [error] => 0
            [name] => blob
            [type] => image/jpeg
            [size] => 33726
        )

)

2018-05-24 16:02:30 Debug: Array
(
    [social_id] => 999
    [img] => Array
        (
            [tmp_name] => /tmp/phpILXG7Q
            [error] => 0
            [name] => blob
            [type] => image/jpeg
            [size] => 58598
        )

)

ちゃんとアップロードできますね！