从 Cropper 保存圆形裁剪图像

Question

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

这是一个小提琴：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) 的response：

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%;
}

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

.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');
            }
        });
    });
});

Answer 2

我认为 jquery-cropper.js 不存在这个函数 getroundedcanvas()，如果是你，你已经用你的函数做得很好，我真的非常需要它，这就是我添加的用 PHP 上传。

case 'getCroppedCanvas':
      if (result) {
        // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
        // The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.

        // Round
        var roundedCanvas = getRoundedCanvas(result);
        // Show
        $('img.MyImage').attr('src',roundedCanvas.toDataURL());
        var roundedBlob ;
        roundedCanvas.toBlob((blob) => {
          roundedBlob = blob;
        });
        result.toBlob((blob) => {
          const formData = new FormData();

          // Pass the image file name as the third parameter if necessary.
          formData.append('UploadPhoto', blob, 'profil.png' );
          formData.append('CircleBlob', roundedBlob, 'circle.png' );
          $.ajax(document.location.pathname, {
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success(response) {
              console.log(response);
              console.log('Upload success');
              $('#imgResizeModal').modal("hide");
            },
            error() {
              console.log('Upload error');
            },
          });
        }/*, 'image/png' */);
      }

      break;