Blob after canvas.toBlob is too heavy

Question

We use S3 storage for hosting our photos. There is a feature on our client that allows to put some masks on the image and send it to S3 to update it.

The problem is that when you initially download a photo it weights about 300kb, but when you do canvas.toBlob and send it on the S3 it weights about 1.5mb. How can I cope with this problem?

https://stackoverflow.com/questions/14672746/how-to-compress-an-image-via-javascript-in-the-browser? — Andy, Oct 20 '21 at 05:54
@Andy okay, will talk to our backend developers. The problem is I do not know whether s3 allows to decode dataURL or we will have to make a middleware for this — egovar, Oct 20 '21 at 23:09
@Andy the other problem is that there are some "resize" actions, but it seems that we can save the file lossless just changing the encoding — egovar, Oct 21 '21 at 04:34

J.... · Answer 1 · 2023-07-16T08:45:42.690

I think you don't set the file type when converting your canvas

try this

YOUR_CANVAS.toBlob(function (blob) {
        var formData = new FormData();
        formData.append('img', blob, YOUR_FILE_NAME);
        $.ajax({
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function () {
                alert('uploaded');
            },
            error: function () {
                alert('error')
            },
        });
    },YOUR_FILE_TYPE);

YOUR_FILE_TYPE can be "image/jpg" or "image/png" or ...

canvas to blob

Blob after canvas.toBlob is too heavy

1 Answers1