Base64剪辑图片

时间:2016-05-02 20:47:38

标签: javascript php image-processing base64

以下代码使用名为cropit的插件提供的base64字符串并将其转换为图像。

list($type, $base64) = explode(';', $base64);
list(, $base64)      = explode(',', $base64);
$base64 = str_replace("data:image/jpeg;base64,", "", $base64);
$base64 = base64_decode($base64);

file_put_contents($directory, $base64);

我还将提供我的javascript,它通过使用输入将base64发送到php函数。我知道问题是由PHP引起的,因为当我将imageData发送到新窗口时,图像将完美显示,没有任何问题。

$('.export_upload').click(function() {
    $("#upload_form_identifier").val("upload_form");

    var imageData = $('.image-editor-upload').cropit('export', {
        type: 'image/jpeg',
        quality: 0.3,
        originalSize: true
    });

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

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

我遇到的问题是,如果我输入图像,它会将其剪辑为随机点。 PHP可能会耗尽内存吗?我对base64的使用不是很好,所以我真的不知道是什么导致这个问题。任何帮助都会很棒。

原始图片: Original Image

PHP处理base64之后: After PHP processes base64

1 个答案:

答案 0 :(得分:1)

虽然这不是最适合我的解决方案,但可能会满足您的需求。我发现的问题是使用originalSize: true,这将导出图像的裁剪部分而不进行任何压缩,从而产生非常大的base64。我解决它的方法是将originalSize设置为false,然后将预览大小调整为我将使用的大小。下面的代码应该有效。

$('.export_upload').click(function() {
            $("#upload_form_identifier").val("upload_form");

            $('.image-editor-upload').cropit('previewSize', {width:1024, height:1024});

            var imageData = $('.image-editor-upload').cropit('export', {
                type: 'image/jpeg',
                quality: .75,
                originalSize: false
            });



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

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

关键是$('.image-editor-upload').cropit('previewSize', {width:1024, height:1024});。这会在将图像发送到php函数之前调整图像大小。唯一真正的问题是,如果用户修改了javascript,他们将能够更改图像的输出大小,但如果您使用php验证上传以确保宽度和高度匹配,这不应该成为问题你把它放在括号内。

我今天想出了一个基本的验证功能。它将根据图像的尺寸是否正确返回true或false。您可以将此应用于初始表单,其中图像已设置并检查它是否匹配并相应地抛出错误。

/**
 * Checks the dimensions of the provided image
 * @param  string $base64_image Base64 string of the image
 * @param  string $width Desired width of the image
 * @param  string $height Desired height of the image
 * @return bool True if dimensions match, false if dimensions do not match
 */
public function checkImageDimensions ($base64_image, $width, $height) {
    list($type, $base64_image) = explode(';', $base64_image);
    list(, $base64_image)      = explode(',', $base64_image);
    $base64_image = base64_decode($base64_image);

    $dimensions = getimagesizefromstring($base64_image);

    if ($dimensions[0] == $width && $dimensions[1] == $height) {
        return true;
    } else if ($dimensions[0] !== $width && $dimensions[1] !== $height) {
        return false;
    }
}