Progress® Telerik® UI for ASP.NET Core Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 20 Jan 2022 21:03 by Cypher
Cypher
Created on: 09 Jun 2021 19:04
Category: ImageEditor
Type: Feature Request
1
How do I request the Kendo ImageEditor to save an image in the same format as the original ?

C# / .NET 5 / Telerik.UI.for.AspNet.Core (V2021.2.511)

 

Dear Telerik,

After opening a JPG file in the Kendo ImageEditor and selecting Save, the image is saved to a .jpg file but in the PNG format instead of the JPG format. This is quite annoying especially because of the increase in file size. For example, a 1MB JPG file is saved to a 6MB PNG file.

Question: How do I request the Kendo ImageEditor to save an image in the same format as the original ?

 

<div class="k-content">
  @(Html.Kendo ().ImageEditor ()
    .Name ("ImageEditor")
    .HtmlAttributes (new { @class = "w-100" })
    .Height (720)
    .SaveAs (PoSaveAs => PoSaveAs.FileName ("Image.jpg"))
    .Toolbar (PoToolbar => PoToolbar.Items (PoItem =>
    {
      PoItem.Add ().Name ("open") ;
      PoItem.Add ().Name ("save") ;

      PoItem.Add ().Name ("undo") ;
      PoItem.Add ().Name ("redo") ;
      PoItem.Add ().Name ("resize") ;
      PoItem.Add ().Name ("crop") ;
      PoItem.Add ().Name ("zoomIn") ;
      PoItem.Add ().Name ("zoomOut") ;
      PoItem.Add ().Name ("zoomDropdown") ;
    })))
</div>
 

Thanks for your help.

 

Duplicated Items
8 comments
Cypher
Posted on: 20 Jan 2022 21:03

Hi Stoyan,

This is very much appreciated. Works like a charm. We will be using the workaround until the feature request is completed.

Thanks very much for your help.

ADMIN
Stoyan
Posted on: 20 Jan 2022 15:43

Hi Netty,

I understand the urgency of the matter but unfortunately at this point we cannot commit to a precise timeframe in which the referred Feature Request will be completed.

That being said I'd like to propose a workaround of the behavior that poses an issue for you:

  1. Subscribe to the Execute Event
  2. In the handler of the event check if the executed command is SaveImageEditorCommand and prevent the event, to stop the file from being saved
  3. Use the WebAPI's HTMLCanvasElement.toDataURL() to return a DataURI of the desired format and compression
  4. Finally use the kendo.saveAs method and pass it the DataURI to save the file in the appropriated format.
    .Events(e=>e.Execute("onExecute"))
            function onExecute(e){
         if(e.command == "SaveImageEditorCommand"){
                e.preventDefault();
                var canvas = e.sender.getCanvasElement();
                var dataURL = canvas.toDataURL("image/jpeg", 1.0);
                kendo.saveAs({
                  dataURI: dataURL,
                  fileName: "test.jpg"
                })
              }
        }

Please review the following REPL that showcases the workaround suggested above.

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Cypher
Posted on: 16 Jan 2022 21:39

Hi Telerik,

Any progress on this issue ?

Quote: "A 1 MB JPG file is saved to a 6 MB PNG file".

The increase in file size is really a blocking issue for me.

 

Thanks for your help.

 

Cypher
Posted on: 14 Jun 2021 22:39

Thanks Stoyan for your help.

Regards

ADMIN
Stoyan
Posted on: 14 Jun 2021 08:24

Hi Cypher,

That's the link to the Feature Request.

In addition I added a vote on your behalf. 

Regards,
Stoyan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Cypher
Posted on: 12 Jun 2021 00:13

Hi Stoyan,

Could you please send me the link to the Feature Request. I can't find it on the Feedback Portal.

Thanks

 

Cypher
Posted on: 11 Jun 2021 23:13

Hi Stoyan,

Thanks for your help.

Hope the request will be implemented. Saving files in the original format will be much appreciated instead of the default bulkier PNG format.

Regards

 

ADMIN
Stoyan
Posted on: 10 Jun 2021 15:55

Hello Cypher,

When the ImageEditor saves the canvas it uses the HTMLCanvasElement.toDataURL() method which returns a data URI containing a representation of the image in the format specified by the type parameter, but defaults to PNG.

Since the type parameter defaults to PNG the current behavior is expected, however the ImageEditor can be upgraded to support the request functionality. For this reason, I am changing the type of this thread to a Feature Request.

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category