javascript - 从 Cropper 保存圆形裁剪图像

Question

我使用 Cropper 将本示例中的图像裁剪为圆形: https://github.com/fengyuanchen/cropperjs/blob/master/examples/crop-a-round-image.html

这是一个 fiddle :http://jsfiddle.net/7hsr98w4/7/

这就是裁剪后的图像的样子:

<img src="data:image/png;base64,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">

然后我使用 Ajax 将该 blob 发送到 PHP 来上传该图像:

document.getElementById('button').addEventListener('click', function(){
    var imgurl = cropper.getCroppedCanvas().toDataURL();
    cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();
        formData.append('avatar', blob);
        // Use `jQuery.ajax` method
        $.ajax('upload.php', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
            },
            error: function () {
                console.log('Upload error');
            }
        });
    });
});

此代码可以在这里找到: https://github.com/fengyuanchen/cropperjs#getcroppedcanvasoptions

在 upload.php 中:

print_r($_FILES);
if(isset($_FILES['avatar']) and !$_FILES['avatar']['error']){
   file_put_contents("uploads/image.png", file_get_contents($_FILES['avatar']['tmp_name']));
}   
exit();

这是来自 print_r($_FILES) 的响应:

Array
(
    [avatar] => Array
        (
            [name] => blob
            [type] => image/png
            [tmp_name] => C:\xampp\tmp\php2BDA.tmp
            [error] => 0
            [size] => 2135
        )

)

当我console.log() blob时，我得到Object:

Blob(2135) {size: 2135, type: "image/png"}

但是当我查看 uploads 文件夹中的图像时，它是一个矩形图像，而不是圆形。

以下是裁剪后的预览方式: 这就是在 uploads 文件夹中预览的方式: 两个图像(预览和保存)均为 360x360。

如何将裁剪后的图像保存为圆形，就像裁剪后预览的那样？

Answer 1

您还需要为.cropper-crop-box添加舍入框CSS

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}

如果你想要圆形 View 框，你可以使用这个

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}

更新:抱歉，我误解了你的问题，实际上你想要的很简单

您已经有了 getRoundedCanvas() ，它可以为您提供裁剪的舍入版本，因此只需在 ajax 调用中使用它即可，例如

document.getElementById('button').addEventListener('click', function(){
    var imgurl = cropper.getCroppedCanvas().toDataURL();

    //only this line is changed
    getRoundedCanvas(cropper.getCroppedCanvas()).toBlob(function (blob) { 
        var formData = new FormData();
        formData.append('avatar', blob);
        // Use `jQuery.ajax` method
        $.ajax('upload.php', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
            },
            error: function () {
                console.log('Upload error');
            }
        });
    });
});