如何使用croppie js到php使用裁剪图像并使用它？

Question

我正在尝试创建图像叠加应用程序，它将为上传的图像添加水印。我已经使用这个tutorial 完成了我的图像叠加应用程序， 现在我需要使用croppie.js 添加裁剪功能。我想将croppie js的输出传递给这个php。

<?php

# Check to see if the form has been submitted or not:
if( !isset( $_POST['submit'] ) ){

    # Form has not been submitted, show our uploader form and stop the script
    require_once( "uploader.html" );
    exit();

}else{

    # Form has been submitted, begin processing data

    # Include the function file then call it with the uploaded picture:
    # TIP: The "../../ portion is a relative path. You will need to change this
    #      path to fit your website's directory structure.
    require_once( 'FacebookPicOverlay.php' );

    # Create the FacebookTagger object using our upload value given to us by uploader.html
    $fbt = new FacebookPicOverlay();

    # Let's say we're using this script to do an image overlay. Let's invoke the
    # overlay method, which will then return the image file relative to the resources
    # folder (ex: will return resources/processed/imagename.jpg).
    try {
        $image = $fbt->overlay( $_FILES['picture_upload'] );
    }catch( Exception $e ){
        print( "<b>Oops!</b> " . $e->getMessage() );
        print( "<br /><br /><a href=\"javascript:history.go(-1)\">Please go back and try again</a>" );
        exit();
    }

    # This will delete all images created more than two days ago (by default).
    # This is helpful in keeping our processed folder at a reasonable file size.
    $fbt->maintenance();

    require_once( "success.html" );

}   

# That's all, folks!
?>

请帮我处理上传表单。谢谢

Answer 1

我也在使用croppie，我从图片预览中显示的Base64代码信息中获取数据。

例子：

JQuery:

var uploadCrop;
function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            uploadCrop.croppie("bind", { url: e.target.result });
            $("#upload-preview").addClass("ready");
        }
        reader.readAsDataURL(input.files[0]);
    }
}

var w = $(window).width(), h = $(window).height();

console.log('window width: ' + w);
console.log('window height: ' + h);
if (w < 400) var wCalc = 25;
else if (w < 350) var wCalc = 50;
else if (w < 300) var wCalc = 75;
else var wCalc = 0;

var uploadCrop = $("#upload-preview").croppie({
    setZoom: 1.0,
    enableOrientation: true,
    quality: 1,
    viewport: {
        width: 250-wCalc,
        height: 250-wCalc,
        type: "circle"
    },
    boundary: {
        width: 320-wCalc,
        height: 320-wCalc
    },
    exif: true
});
$("#upload").on("change", function () {
    readFile(this);
});
function output(node) {
var existing = $("#result .croppie-result");
    if (existing.length > 0) {
    existing[0].parentNode.replaceChild(node, existing[0]);
    } else {
    $("#result")[0].appendChild(node);
    }
}
function popupResult(result) {
    var html;
    if (result.html) {
        html = result.html;
    }
    if (result.src) {
        $("#result").html("<img id=\"canvas\" src=\"" + result.src + "\" />");
    }
}

HTML：

<span class="btn btn-grey btn-file">
    <input id="upload" name="file_data" type="file" accept="image/*" /> Browse
</span>

</div>
    <div class="container">
        <div id="upload-preview" class="mt30 mb35"></div>
    </div>
</div>

现在这是您处理点击事件并将图像信息存储在resp中的部分：

$('body').on('click', '.ajax-post', function (e) {
    e.preventDefault();
    thisVar = $(this);
    var img_width = $('.cr-image').attr('width');

    if (img_width) {
        // Image Base64
        uploadCrop.croppie("result", {type: "canvas", size: {width: 600, height: 600}}).then(function (resp) {
            popupResult({src: resp});
            saveAjax(thisVar, resp);
        });
    } else {
        saveAjax(thisVar);
    }
});

saveAjax 是我自己处理 ajax 请求的函数。您只需传递包含图像信息的resp 或在函数本身中写入该ajax 请求。

有关此方法和主题的更多信息：How to display Base64 images in HTML?