cropper.js 上传带坐标的原图

Question

我正在使用 cropper.js。我想上传原始图像和裁剪后的坐标（x、y、宽度、高度）而不是裁剪后的图像。这样做的首选方法是什么？

谢谢。

Answer 1

对于这个问题的客户端，这里是我用来打包裁剪框数据并将其发送到服务器的代码。见特别说明：

formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData')));

$('#crop_button').click(function(){
    // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
    // Store crop coordinates to db for future visit.
    var canvas = $imageBox.cropper('getCroppedCanvas');
    canvas.toBlob(function (blob) {
        var formData = new FormData();
        formData.append('croppedImage', blob);  // 'croppedImage' is the sent filename
        formData.append('last_crop', JSON.stringify($imageBox.cropper('getCropBoxData')));

        $.ajax('{% url 'profile_crop_avatar' %}', {
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                console.log('Upload success');
            },
            error: function () {
                console.log('Upload error');
            }
        });
    }, "image/jpeg", 0.75);

    // Also update masthead image after crop
    $('#masthead-avatar').attr('src', canvas.toDataURL());
});

在服务器端 (Django)，我使用以下方法处理和存储坐标：

# Save new image and crop coords to profile
p = request.user
p.last_crop_coords = request.POST.get('last_crop')
p.save()

cropper.js 上传带坐标的原图

cropper.js uploading the original images with coordinates

javascript

file-upload

image-uploading

cropper