save image from canvas without increasing its size

Question

I have a website where people can upload images and crop them before they upload them to the server. My problem is that each image size increases by hundred percent in the upload process. For example if I take an JPG image size 102kb 640x640, when it is loaded from the website, I use the chrome network tool after I crea the cache and see that its size is 800kb (after I saved it with size 600x600). In order to save it to the DB I use HTML5 canvas and cropping using http://fengyuanchen.github.io/cropper/ In the server side I use Azure CloudBlockBlob.

Client:

  VData = $("#uploadedImage").cropper('getCroppedCanvas', {
            width: 600,
            height: 600
        }).toDataURL();

Server:

public PhotoInfo UploadPhoto(string image, string picCaption)
    {
        string base64 = image.Substring(image.IndexOf(',') + 1);
        byte[] imageByte = Convert.FromBase64String(base64);
        Stream stream = new MemoryStream(imageByte);
        // Retrieve storage account from connection string.
        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
            ConfigurationManager.AppSettings.Get("StorageConnectionString"));

        // Create the blob client.
        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

        // Retrieve reference to a previously created container.
        CloudBlobContainer container = blobClient.GetContainerReference("photos");
        if (container.CreateIfNotExists())
        {
            // configure container for public access
            var permissions = container.GetPermissions();
            permissions.PublicAccess = BlobContainerPublicAccessType.Container;
            container.SetPermissions(permissions);
        }

        // Retrieve reference to a blob 
        string uniqueBlobName = string.Format("{0}{1}", Guid.NewGuid().ToString(), Path.GetExtension("blob")).ToLowerInvariant();
        CloudBlockBlob blob = container.GetBlockBlobReference(uniqueBlobName);
        //blob.Properties.ContentType = image.ContentType;
        blob.Properties.ContentType = "image/jpg";

        stream.Position = 0;
        blob.UploadFromStream(stream);

        var photo = new PhotoInfo()
        {
            ImagePath = blob.Uri.ToString(),
            InvitationId = 0,
            Name = picCaption != null ? picCaption : ""
        };

        PhotoInfo uploadedPhoto = _boxItemProvider.SetPhoto(photo);

        return uploadedPhoto;
    }

Any advice here?

Thanks.

I don't know anything about "cropper", but is there a switch to set (lessen) the jpg quality? — markE, Nov 22 '15 at 20:47
Don't know "cropper" either, but it seems that you do upload a png version of your image. The solution would then be to first save the canvas as a jpeg, and even use the `0-1` quality parameter as adviced by @markE, and if this is not enough, you can even try to [transform your base64 string back to a blob](http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158), saving approximately 37% of the data's size. If "cropper" doesn't have these options, you could call directly cropped canvas' `toDataURL("image/jpeg", quality)` method. — Kaiido, Nov 23 '15 at 01:13

score 0 · Answer 1 · answered Nov 23 '15 at 08:49

0

Issue was solved! instead of just using toDataURL() with no parameters I replaced it with toDataURL("image/jpeg", quality) and image size was almost same as the original when the quality was 1 and 50% less when quality was 0.75

answered Nov 23 '15 at 08:49

Bergerova

863
3
10
21

But it decreases the image quality, instead, we can use the MIME type same as the original image and do not change the quality, so it might maintain near-most size. – Girish Jul 20 '17 at 09:59

save image from canvas without increasing its size

1 Answers1