保存画布中的图像而不增加其大小
本文关键字:增加 布中 图像 保存 | 更新日期: 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%