locked
manipulate images in Blazor Client-side RRS feed

  • Question

  • User1461220549 posted

    Hi there,

    I need to change resolution of an Image on Blazor Client-Side.

    I tried with this code:

        public static class IncreaseImgResolution
        {
            public static async Task<string> IncreaseDpi(string base64IngString, float moltiplicatioFactor)
            {
                return await Task.Run(() => EnchangeImgDpi(base64IngString, moltiplicatioFactor));
            }
    
            private static string EnchangeImgDpi(string base64IngString, float moltiplicatioFactor)
            {
                byte[] imageBytes = Convert.FromBase64String(base64IngString);
                var ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
                var OriginalBitmap = new Bitmap(ms);
                var vertRes = OriginalBitmap.VerticalResolution * moltiplicatioFactor;
                var horRes = OriginalBitmap.HorizontalResolution * moltiplicatioFactor;
                OriginalBitmap.SetResolution(horRes, vertRes);
                using (var stream = new MemoryStream())
                {
                    OriginalBitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
                    var str = stream.ToArray();
                    return Convert.ToBase64String(str);
                }
            }
        }
    

    But I retrieve following error:

    blazor.webassembly.js:1 WASM: System.PlatformNotSupportedException: Operation is not supported on this platform.

    At following line of code:

    var OriginalBitmap = new Bitmap(ms);

    So, I think System.Drawing is not working on webassembly.

    I would like to know if somebody can suggest some workaround or alternative solutions.

    Thank you

    Thursday, March 19, 2020 5:28 PM

Answers

  • User-474980206 posted

    You really have couple options

    1. upload image to the server and have it do the work and return the image. just remember only JavaScript supports network access, so the upload / download will really be done in JavaScript.
    2. Call JavaScript to do the work. This is the most performance approach. 
    3.  find an image library supported the blazor runtime. This will increase the download size of the blazor application.

    note: client blazor does not support threading, so there is no need to do a task.run. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 20, 2020 1:37 AM