Question

我有一个网站，人们可以上传图片并在将图片上传到服务器之前将其裁剪。我的问题是每个图像大小在上传过程中增加了百分之百。例如，如果我从JPG图像大小 102kb 640x640，当它从网站加载时，我在创建缓存后使用chrome网络工具，并看到它的大小 800kb （在我用尺寸600x600保存之后）。为了将其保存到数据库，我使用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;
    }

这里有什么建议吗？

感谢。

Answer 1

问题解决了！而不仅仅使用没有参数的toDataURL()我将其替换为toDataURL("image/jpeg", quality)，当质量为1时，图像大小与原始图像大小相同，当质量为0.75时，图像大小与原始图像大小相同50％

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

1 个答案: