如何使用带有 php 的cropit jquery 插件裁剪和上传照片

Posted 2023-02-22

【中文标题】如何使用带有 php 的cropit jquery 插件裁剪和上传照片

【英文标题】：How to crop and upload photo using cropit jquery plugin with php

【发布时间】：2015-03-21 01:43:53

【问题描述】：

所以我目前发现了这个名为 cropit 的照片裁剪插件。演示是here。所以我想要做的是抓取裁剪的照片并将照片的名称上传到mysql数据库并使用php将其保存到目录中。

到目前为止，我有这个：

html：

<form method="POST">
    <div class="image-editor">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
            <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit">Submit</button>
    </div>
</form>

jQUERY：

    $('form').submit(function() 
        // Move cropped image data to hidden input
        var imageData = $('.image-editor').cropit('export');
        $('.hidden-image-data').val(imageData);

        // Print HTTP request params
        var formValue = $(this).serialize();
        $('#result-data').text(formValue);

        // Prevent the form from actually submitting
        return false;
    );

我需要帮助的是 php 设置代码，因为当我裁剪照片并选择提交时，jquery 返回序列化代码，并且我通常不熟悉的所有这些代码都会出现。这是jquery返回的序列化代码的几个字符：

image-data=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE...

【问题讨论】：

看看这个很棒的库 -Intervention Image-，你不会后悔的。它可以作为独立库使用，也可以作为 Laravel 包使用。

完全可以推荐Intervention Image。下面答案中的代码不起作用（空白图像），但一旦我使用干预，它就可以完美运行。

接受的答案对我不起作用，但这个干预图像做得很好

【参考方案1】：

1.保存base64编码的图片

    <?php
    //save your data into a variable - last part is the base64 encoded image
    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";

    //decode the url, because we want to use decoded characters to use explode
    $decoded = urldecode($encoded);

    //explode at ',' - the last part should be the encoded image now
    $exp = explode(',', $decoded);

    //we just get the last element with array_pop
    $base64 = array_pop($exp);

    //decode the image and finally save it
    $data = base64_decode($base64);
    $file = 'data.png';

    //make sure you are the owner and have the rights to write content
    file_put_contents($file, $data);

2。获取base64编码图片的文件名

    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
    $decoded = urldecode($encoded);
    $exp = explode(';', $decoded);
    $exp = explode(':', $exp[0]);
    $image = array_pop($exp);
    echo ($image);

【讨论】：

优秀的答案。我有 1 个问题，我如何获得照片扩展名，因为它并不总是 png？我问的原因是因为我要将它添加到文件名的末尾。

图像名称包含它。您可以再次使用 explode() ，就像我的示例中所示。请注意，给定的文件扩展名不必与文件的 MIME 类型匹配。

我们如何将 jquery 数据保存在 php 变量中？

@JaskaransinghRajal 你必须使用 ajax 并设置 POST 或 GET 参数

我注意到，即使我上传“jpg”，我仍然收到编码为“data:image/png;base64”。如果它是“jpg”，它不应该显示“data:image/jpg;base64”吗？

【参考方案2】：

通过不解码编码数据，我得到了 Hosch Nok 的答案。 不打电话：

$decoded = urldecode($encoded);

但直接使用 $encoded 变量。