croppie js를 사용하여 자른 이미지를 사용하여 PHP로 사용하는 방법은 무엇입니까?

Question

이미지 오버레이 앱을 만들려고합니다. 업로드 된 이미지에 워터 마크가 추가됩니다. 이 이미지를 사용하여 이미지 오버레이를 완료했습니다. tutorial, 이제 croppie.js을 사용하여 자르기 기능을 추가해야합니다. 나는이 PHP에 croppie js의 출력을 전달하고 싶다.

<?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은 아약스 요청을 처리하는 자체 함수입니다. 이미지 정보가 포함 된 resp을 전달하거나 함수 자체에 해당 ajax 요청을 작성하기 만하면됩니다. How to display Base64 images in HTML?