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

Posted 2023-02-25

【中文标题】如何使用croppie js到php使用裁剪图像并使用它？

【英文标题】：How to use cropped image using croppie js to php and use it?

【发布时间】：2016-10-31 08:02:49

【问题描述】：

我正在尝试创建图像叠加应用程序，它将为上传的图像添加水印。我已经使用这个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!
?>

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

【问题讨论】：

没有表格，几乎没有代码。裁剪后，您可以将数据作为 blob 取出（例如，使用canvas.getImageData）然后传递给 php 进行处理吗？这就是你需要做的所有事情，但提供的代码并没有告诉我们什么。

【参考方案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?

【讨论】：

感谢您的帮助！但是如何将它传递给我上面提到的 uploader.php。我对php开发完全陌生！非常感谢您的帮助