如何将图像从Cropit导出到php以进行上传? [英] How to export image from cropit to php for upload?

问题描述

我已经在互联网上搜索了一阵子了，找不到任何能告诉我如何将$('#image-cropper').cropit('export')中的结果转换为PHP可以上传到服务器的图像的信息.我正在使用Cropit插件，我只需要一张可以传递到我的php上传脚本中的图像即可.我的代码如下:

I've been searching the internet for a while now and cannot find anything that tells me how I turn the result from $('#image-cropper').cropit('export') into an image that PHP can upload to the server. I'm using the Cropit plugin and all I need is an image that I can pass into my php upload script. My code is as follows:

HTML:

<div id="image-cropper">
    <input type="file" class="cropit-image-input" />
    <div class="cropit-image-preview"></div>
    <input type="range" class="cropit-image-zoom-input" />
    <button class="export">Export</button>
</div>

jQuery:

            var username = "<?php echo $userData['username']; ?>";
            $('#image-cropper').cropit({
                imageState:{
                    src:'users/'+username+'/profile_picture.jpg'
                },
            });   

            $('#image-cropper').cropit('previewSize', {width:500, height:500});


            $('.export').click(function() {
                var imageData = $('#image-cropper').cropit('export');
                //$("#code").val(imageData);
                window.open(imageData);
            });  

这里的代码对于插件正常工作，但是我无法将看起来像data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD...的结果转换为可以在php脚本中使用的图像.任何帮助将是巨大的.谢谢！

The code here is working properly for the plugin but I'm unable to turn the result which looks something like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD... into an image that I can use in a php script. Any help would be great. Thanks!

推荐答案

让它工作的方法是弄乱Cropit的质量设置，并创建一个读取base64字符串并将其转换为图像的PHP函数.

The way I got it to work is by messing around with the quality settings of Cropit and creating a PHP function that reads the base64 string and converts it to an image.

下面的代码用于裁剪.我正在设置超时，因为如果您不设置超时，它将在cropit创建base64之前将表单发送到php. base64字符串仅存储在php可以基于$_POST

The code below is for cropit. I'm setting a timeout because if you don't it will send the form to php before cropit can create the base64. The base64 string is just stored in a text field which php can communicate based on $_POST

//Initiate Cropper
$('.image-editor').cropit();

//Assign Export Function
$('.export').click(function() {
    var imageData = $('.image-editor').cropit('export', {
        type: 'image/jpeg',
        quality: 0.33,
        originalSize: true,
    });

    //Set value of hidden input to base64
    $("#hidden_base64").val(imageData);

    //Pause form submission until input is populated
    window.setTimeout(function() {
        document.upload_form.submit();
        alert(imageData);
    }, 1000);
});

以下代码适用于php.它通过解码base64然后将其移动到指定目录来工作.

The code below is for php. It works by decoding the base64 then moving it to a specified directory.

function decode ($code, $username) {
    list($type, $code) = explode(';', $code);
    list(, $code)      = explode(',', $code);
    $code = base64_decode($code);

    file_put_contents('directory/filename.jpg', $code);
}

这篇关于如何将图像从Cropit导出到php以进行上传?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！