SaeedP
Well-known member
- Joined
- Oct 21, 2020
- Messages
- 113
- 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:
And here is js file::
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:
Please guide me.
thanks,
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:
Please guide me.
thanks,
