cropper.js uploading the original images with coordinates

做~自己de王妃 提交于 2019-12-25 07:48:10

问题


I am using cropper.js. I would like to upload the original image and the cropped coordinates(x,y,width,height) not the cropped image. What is the preferred way to do that?

Thanks.


回答1:


For the client side of this question, here is code I use to package up the crop box data and ship it off to the server. See esp:

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());
});

On the server side (Django) I handle and store the coords with:

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


来源:https://stackoverflow.com/questions/41943931/cropper-js-uploading-the-original-images-with-coordinates

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!