如何使用裁剪图像使用croppie js php和使用它 - How to use cropped image using croppie js to php and use it?

我正在尝试创建图像覆盖应用程序，这将添加水印到上传的图像。我已经用这个教程完成了我的图像叠加应用程序，现在我需要使用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!
?>

请帮我完成上传表单。由于

我也使用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请求。

关于此方法和主题的更多信息:如何在HTML中显示Base64图像?