2

トリミングされた画像を処理して郵送するにはどうすればよいですか? Cropper.jsライブラリを使用しています。フォーム要素に既に含まれている HTML コード。これらのコードは、サンプル管理テンプレートからコピーされました。トリミングは機能しますが、ファイルを送信できません。

HTML出力

HTML:

<div class="row">
<div class="col-md-6">
    <div class="image-crop">
        <img src="{{ asset('backend/images/image-upload.png') }}">
    </div>
</div>
<div class="col-md-6">
    <h4>Preview image</h4>
    <div class="img-preview img-preview-sm" style="width: 180px;height:180px;"></div>
    <hr>
    <div class="btn-group">
        <button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
        <button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
        <button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
        <button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
    </div>
    <hr>
    <div class="btn-group">
        <label title="Upload image file" for="inputImage" class="btn btn-primary">
            <input type="file" accept="image/*" name="file" id="inputImage" class="hide">
            Upload new image
        </label>
        <label title="Donload image" id="download" class="btn btn-primary">Download</label>
    </div>


</div>

JS:

var $image = $(".image-crop > img")
$($image).cropper({
    aspectRatio: 1,
    preview: ".img-preview",
    done: function(data) {
        // Output the result data for cropping image.


    }
});

var $inputImage = $("#inputImage");
if (window.FileReader) {
    $inputImage.change(function() {
        var fileReader = new FileReader(),
                files = this.files,
                file;

        if (!files.length) {
            return;
        }

        file = files[0];

        if (/^image\/\w+$/.test(file.type)) {
            fileReader.readAsDataURL(file);
            fileReader.onload = function () {
                $inputImage.val("");
                $image.cropper("reset", true).cropper("replace", this.result);
            };
        } else {
            alert("Please upload a image file");
        }
    });
} else {
    $inputImage.addClass("hide");
}


//Disabled Cropped Image Download
/*
$("#download").click(function() {
    window.open($image.cropper("getDataURL"));
});
*/

PHP:

var_dump($_FILES);

ポスト出力: 出力

4

1 に答える 1

0

canvas最初にそれを行い、base64文字列を取得toDataURL("image/png")してからサーバー側でキャッチし、base64文字列を使用して再度画像に変換します

この投稿をご覧ください。 JavaScriptで画像をバイナリデータに変換する

于 2016-11-02T07:00:11.137 に答える