Problem in bitmap to vector image converter

SaeedP

Well-known member
Joined
Oct 21, 2020
Messages
106
Programming Experience
3-5
Hi,

I want to make an app that converts a bitmap image to SVG format.

Below you can see my code:

C#:
@page "/"
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntime

<h1>Convert Bitmap to Vector</h1>

<input type="file"
    @oninput="ConvertImage" accept="image/*" />
<br />

@if (!string.IsNullOrEmpty(VectorSvg))
    {
    <h2>Vector Graphic:</h2>
    <div>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            @* Display SVG content *@
            @((MarkupString)VectorSvg)
        </svg>
    </div>
    }


@code{

    private string? VectorSvg;



    private async Task ConvertImage ( InputFileChangeEventArgs e )
        {

        var file = e.GetMultipleFiles().FirstOrDefault();
        if (file != null)

            {
            
            byte[] imageBytes;
            using (var stream = file.OpenReadStream())
                {
                imageBytes = new byte[stream.Length];
                await stream.ReadAsync(imageBytes, 0, (int)stream.Length);
                }


            // Call JavaScript function to convert the image to vector using Potrace
            // VectorSvg = await JSRuntime.InvokeAsync<string>("convertToVector",imageBytes);

            try
                {
                VectorSvg = await JSRuntime.InvokeAsync<string>("convertToVector", imageBytes);
                }
            catch (Exception e)
                {
                Console.WriteLine($"Unexpected error: {e.Message}");
                
                }


            }

        }


    }

And here is js file::

C#:
// This section imports the necessary JavaScript interop capabilities for calling the Potrace library.
window.convertToVector = function (imageBytes) {
    return new Promise((resolve, reject) => {
        // Convert image bytes to base64 string
        var base64Image = arrayBufferToBase64(imageBytes);


        // Call Potrace library for vectorization
        potrace({ input: base64Image, format: 'image/svg+xml' }, function (err, svg) {
            if (err) {
                reject(err); // Failed to convert, reject with error
            } else {
                resolve(svg); // Conversion successful, resolve with SVG content
            }

        });
    });
};


function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }

    return window.btoa(binary); // Encode binary data to base64
}

1.In index page in my input tage I see a red line under ConvertImage.
2. In the ConvertImage function in code section I see redline under imageBytes argument.
3. When I want to run the code I encounter to this error:

VS_Error.png




Please guide me.

thanks,
 
Of course you can't run the executable. It failed to build because of the compilation errors. You need to address those errors, i.e. fix the code. The Error List window will show you each compilation error and the reason for it, or you can just mouse over each error in the code window.
 
You are getting that error because your executable file was not found. It was not found because you had compilation errors. Notice in the Visual Studio status bar it says "Build failed", and in the Output pane it shows the details of the build failure.

Paste in the errors that you got as text (not as a screenshot) so that we can try to help you further.

You said that you saw a red squiggly line. That means that the compiler thinks there is a syntax error. Share with us that syntax error.
 
Here are the errors:

Severity Code Description Project File Line Suppression State
Error CS1503 Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback' BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 10 Active
Error CS1503 Argument 2: cannot convert from 'byte[]' to 'object?[]?' BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 52 Active
Error CS0136 A local or parameter named 'e' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 54 Active
Error (active) CS1503 Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback' BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 10
Error (active) CS1503 Argument 2: cannot convert from 'byte[]' to 'object?[]?' BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 52
Error (active) CS0136 A local or parameter named 'e' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter BlazorApp2_Monica(AI) E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor 54



This is the first time I use jsinterop.
 
Last edited by a moderator:
Cleaning that up a bit:
Code:
CS1503    Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback'    10
CS1503    Argument 2: cannot convert from 'byte[]' to 'object?[]?'    52
CS0136    A local or parameter named 'e' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter    54
 
This error:
C#:
CS1503    Argument 2: cannot convert from 'byte[]' to 'object?[]?'    52
is complaining about this
C#:
JSRuntime.InvokeAsync<string>("convertToVector", imageBytes);

The method expects to see an array of objects, but you are passing in an array of bytes. Declare an array of objects that contains one element. For that first element, store a reference to your array of bytes.
 
Declare an array of objects that contains one element. For that first element, store a reference to your array of bytes.
Certainly! Here is the revised text:

"Could you please explain that code to me and provide instructions on how to proceed?"

I casted the bytes to an object, but the problem still remains!
 
This error:
C#:
CS0136    A local or parameter named 'e' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter    54
is due to this error:
C#:
CS1503    Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback'    10
which is complaining about this line:
C#:
private async Task ConvertImage ( InputFileChangeEventArgs e )
I don't use Razor a lot, but I think you should be using <InputFile>. See How do I upload files with Blazor?
 
Certainly! Here is the revised text:

"Could you please explain that code to me and provide instructions on how to proceed?"

I casted the bytes to an object, but the problem still remains!

I didn't tell you to cast the byte array into an object array. I told you to put a reference to the byte array in the object array.

Here's as example of putting a reference to a string into a string array:
C#:
string stringReference = "I don't understand references.";
string [] arrayOfStrings = new string[1];
arrayOfStrings[0] = stringReference;
 
I know I'm very impulsive. I wrote the following codes, do you think it is close?

C#:
@page "/"
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntime
@using System.Drawing;
@using System.IO;
@using system;

<h1>Convert Bitmap to Vector</h1>

<input type="file"
    @oninput="ConvertImage" accept="image/*" />
<br />

@if (!string.IsNullOrEmpty(VectorSvg))
    {
    <h2>Vector Graphic:</h2>
    <div>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            @* Display SVG content *@
            @((MarkupString)VectorSvg)
        </svg>
    </div>
    }


@code{

    private string? VectorSvg;



    private async Task ConvertImage ( InputFileChangeEventArgs e )
        {

        var file = e.GetMultipleFiles().FirstOrDefault();
        if (file != null)

            {
            
            byte[] imageBytes;
            string myImage = Convert.ToBase64String(imageBytes);
            
            string myImage =
            using (var stream = file.OpenReadStream())
                {
                imageBytes = new byte[stream.Length];
                await stream.ReadAsync(imageBytes, 0, (int)stream.Length);
                }


            // Call JavaScript function to convert the image to vector using Potrace
            // VectorSvg = await JSRuntime.InvokeAsync<string>("convertToVector",imageBytes);

            
                VectorSvg = await JSRuntime.InvokeAsync<string>("convertToVector", imageBytes);
            


            }

        }


    }
 
Did that fix the error that you were trying to fix? If not what error are you now getting?
 
These are errors:

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error    CS0246    The type or namespace name 'system' could not be found (are you missing a using directive or an assembly reference?)    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    8    Active

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS0246    The type or namespace name 'system' could not be found (are you missing a using directive or an assembly reference?)    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    8

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS1503    Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback'    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    13

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS0165    Use of unassigned local variable 'imageBytes'    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    43

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS0128    A local variable or function named 'myImage' is already defined in this scope    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    45

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS1525    Invalid expression term 'using'    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    45

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS1002    ; expected    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    45

C#:
Severity    Code    Description    Project    File    Line    Suppression State
Error (active)    CS1503    Argument 2: cannot convert from 'byte[]' to 'object?[]?'    BlazorApp2_Monica(AI)    E:\Conver_Bitmap_To_vector_Blazor try\Try_2__ChatGpt_3.5 - Copy\BlazorApp2_Monica(AI)\Pages\Index.razor    57

I see a red line under myImage and imageByte!
 
Part of being a programmer is learning how to read and understand error messages. The errors listed above see pretty clear. You are trying to use imageBytes before it's been initialized. You are trying to declare myImage within the same scope twice.

I still don't see you declaring an object array and then trying to put the imageBytes into an element of that object array.
 
If you need something that behaves like a junior dev and does code for you, use chatgpt; don't just post your errors here and say "fix please"
 
Back
Top Bottom