從畫布上保存圖像而不增加其大小

我有一個網站，人們可以上傳圖像並在將圖像上傳到服務器之前進行裁剪。我的問題是，每個圖像的大小在上傳過程中增加百分之百。例如，如果我拍攝的JPG圖像大小爲102kb 640x640，當它從網站加載時，我使用鉻網絡工具在創建緩存後查看其大小爲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; 
    }

這裏有什麼建議？

謝謝。

來源

2015-11-22 Bergerova

我對「收割機」一無所知，但是有沒有設置（減少）JPG質量的開關？ – markE

不知道「收割機」，但似乎你確實上傳了一個png版本的圖像。然後，解決方案將首先將畫布保存爲jpeg，甚至使用@markE提供的'0-1'質量參數，如果這還不夠，您甚至可以嘗試[將base64字符串轉換回blob]（節省大約37％的數據大小）（http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158#5100158）。如果「裁剪器」沒有這些選項，你可以直接調用裁剪畫布toDataURL（「image/jpeg」，quality）'方法。 – Kaiido

問題解決了！而不是僅僅使用toDataURL()沒有參數我用toDataURL("image/jpeg", quality)代替它，圖像尺寸與質量爲1時的原始尺寸幾乎相同，質量爲0.75時降低了50％

來源

2015-11-23 08:49:46 Bergerova

但是它會降低圖像質量，相反，我們可以使用與原始圖像相同的MIME類型，並且不會更改質量，因此可能會保持最接近的大小。 – Girish

從畫布上保存圖像而不增加其大小

回答

相關問題