保存画布中的图像而不增加其大小

本文关键字:增加 布中 图像 保存 | 更新日期: 2023-09-27 18:23:48

我有一个网站,人们可以在上传图像并在上传到服务器之前对其进行裁剪。我的问题是,在上传过程中,每个图像的大小都会增加100%。例如,如果我拍摄的JPG图像大小102kb640x640,当它从网站加载时,我在创建缓存后使用chrome网络工具,发现它的大小为800kb(在我以600x600的大小保存它之后)。为了将其保存到DB中,我使用HTML5画布并使用http://fengyuanchen.github.io/cropper/在服务器端,我使用Azure CloudBlockBlob。

客户:

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

服务器:

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

这里有什么建议吗?

谢谢。

保存画布中的图像而不增加其大小

问题已解决!我不是只使用没有参数的toDataURL(),而是用toDataURL("image/jpeg", quality)替换它,并且当质量为1时图像大小几乎与原始图像相同,当质量为0.75 时图像大小减少50%