Сохранить изображение с canvas без увеличения его размера

У меня есть сайт, на котором люди могут загружать изображения и обрезать их, прежде чем загружать их на сервер. Моя проблема заключается в том, что каждый размер изображения увеличивается на сто процентов в процессе загрузки. Например, если я беру размер изображения JPG 102kb 640x640, когда он загружен с веб-сайта, я использую хром-сетевой инструмент после создания кеша и вижу, что его размер равен 800kb (после того, как я сохранил его размером 600x600). Чтобы сохранить его в БД, я использую холст HTML5 и обрезку с использованием http://fengyuanchen.github.io/cropper/ На стороне сервера я использую Azure CloudBlockBlob.Сохранить изображение с canvas без увеличения его размера

Клиент:

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

Любые советы здесь?

Спасибо.

источник

2015-11-22 Bergerova

Я ничего о «кадрировании» не знаю, но есть ли переключатель для установки (уменьшения) качества jpg? – markE

Не знаю также «обрезку», но, похоже, вы загружаете png-версию своего изображения. Тогда решение должно было бы сохранить холст как jpeg и даже использовать параметр качества «0-1», как рекомендовано @markE, и если этого недостаточно, вы можете даже попытаться преобразовать строку base64 в blob] (http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158), экономя приблизительно 37% от размера данных. Если у параметра «обрезка» нет этих параметров, вы можете вызвать метод обрезанного canvas 'toDataURL (« image/jpeg », quality). – Kaiido

Вопрос был решен! вместо использования toDataURL() без параметров я заменил его toDataURL("image/jpeg", quality) и размером изображения был почти таким же, как оригинал, когда качество было 1 и 50% меньше, когда качество было 0.75

источник

2015-11-23 08:49:46 Bergerova

Но это уменьшает качество изображения, вместо этого мы можем использовать тип MIME так же, как и исходное изображение, и не изменять качество, поэтому он может поддерживать почти самый большой размер. – Girish

Сохранить изображение с canvas без увеличения его размера

ответ

Смежные вопросы