Some images causing croppedCanvas!.JSRuntimeObjectRef.InvokeAsync<string>("toDataURL" to never return

[kwoeste11]

I have found some images that won't return from the call below. Some do. All of my code came out of the demo app, but the demo app site doesn't have problems with the same images.

var data = await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync<string>("toDataURL", srcType, 1);

I have put together a minimal page that will show the issue. Since the demo app works ok with the images there seems to be something I am doing wrong in code. At a loss as to what it is though. If there is a better way to show the code, let me know. I also tried replacing the image and that failed the same way

Page that illustrates the issue. this page wouldn't show mark up preview as text or code so put a screenshot in for that.

@page "/"
@using Cropper.Blazor.Extensions
@using Cropper.Blazor.Models
@using Microsoft.AspNetCore.Components.Forms

<button type="submit" @OnClick="@save">Crop Image

`
@code {

private CropperComponent? cropper = null!;
private string src = "";
private string srcType = "imgage/jpg";
string fileName = "";
private Options options = null!;

protected override void OnInitialized()
{
	options = new Options()
		{
			AspectRatio = 1,
			ViewMode = ViewMode.Vm1,
			Responsive = false
		};
}

public async Task InputFileChangeAsync(InputFileChangeEventArgs inputFileChangeEventArgs)
{
	var imageFile = inputFileChangeEventArgs.File;

	if (imageFile != null)
	{
		fileName = imageFile.Name;
		srcType = imageFile.ContentType;

		string oldSrc = src;

		src = await cropper!.GetImageUsingStreamingAsync(imageFile, imageFile.Size);

		cropper?.Destroy();
		cropper?.RevokeObjectUrlAsync(oldSrc);
	}
}

private async Task Save()
{
	if ((cropper is not null) && !string.IsNullOrWhiteSpace(fileName))
	{
		await SaveCroppedImage("c:\\temp\\", fileName!);
	}
}

private async Task SaveCroppedImage(string filePath, string fileName)
{
	GetCroppedCanvasOptions getCroppedCanvasOptions = new()
		{
			MaxHeight = 4096,
			MaxWidth = 4096,
			ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString()
		};

	CroppedCanvas croppedCanvas = await cropper!.GetCroppedCanvasAsync(getCroppedCanvasOptions);

	//=============================================================================================
	// This line goes off into la la land for some images.
	//=============================================================================================
	var data = await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync<string>("toDataURL", srcType, 1);

	//=============================================================================================
	// for images that fail, we never make it this far.  the call above goes for a long time.
	//=============================================================================================
	WriteDataToFile(filePath, fileName, data);
}

//=============================================================================================
// This is really not germane to the minimal sample in that it never gets here for images that
// fail.  Left it here as an easy way to tell those images that work as they get written out.
//=============================================================================================
private void WriteDataToFile(string filePath, string fileName, string imageData)
{
	// Check if directory exist
	if (!string.IsNullOrWhiteSpace(filePath) && !string.IsNullOrWhiteSpace(fileName))
	{
		if (!System.IO.Directory.Exists(filePath))
		{
			System.IO.Directory.CreateDirectory(filePath); //Create directory if it doesn't exist
		}

		string imgPath = Path.Combine(filePath, fileName);
		byte[] imageBytes = Convert.FromBase64String(RemoveHeader(imageData));

		File.WriteAllBytes(imgPath, imageBytes);
	}
}

//=============================================================================================
// This is really not germane to the minimal sample in that it never gets here for images that
// fail.  Left it here as an easy way to tell those images that work as they get written out.
//=============================================================================================
// the string that comes from the control wil have header info on it.  That needs
// to be removed in order to save the byte data.
private string RemoveHeader(string imageData)
{
	if (imageData.StartsWith("data:"))
	{
		return imageData.Substring(imageData.LastIndexOf(',') + 1);
	}

	return imageData;
}

}
`

I have attached 2 images. it embedded them. Not sure if I can attach them another way. Cano.jpg, does not work. Sully.jpg works

Sully works

Cano does not work

[kwoeste11]

I have narrowed this down to having something to do with the maxwidth and maxheight. I used 4096 as that was what the sample code did. changing to 2048 seems to have helped. Doesn't seem to matter if that is bigger than the image at 2048 either. Not sure what the issue is with the higher number. Change I made is below. Then the images that were not working returned.

GetCroppedCanvasOptions getCroppedCanvasOptions = new() { MaxHeight = 2048, MaxWidth = 2048, ImageSmoothingQuality = ImageSmoothingQuality.High.ToEnumString() };

[MaxymGorn]

Hi @kwoeste11 . What do you pass into srcType in this place?

[MaxymGorn]

I'm recommended to use standard types, for example "image/png" or another supported types in HTMLCanvasElement.toDataURL(type, encoderOptions) or HTMLCanvasElement.toDataURL(type) methods: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

[kwoeste11]

@MaxymGorn , I read it from the file when I load the file. jpg's come back as "image/jpeg" for the samples I am using.

seen below in the sample code I put in the original post. Doesn't seem to want to bold. ** inidcates the line

`
public async Task InputFileChangeAsync(InputFileChangeEventArgs inputFileChangeEventArgs)
{
var imageFile = inputFileChangeEventArgs.File;

	if (imageFile != null)
	{
		fileName = imageFile.Name;



		**srcType = imageFile.ContentType;**


		string oldSrc = src;

		src = await cropper!.GetImageUsingStreamingAsync(imageFile, imageFile.Size);

		cropper?.Destroy();
		cropper?.RevokeObjectUrlAsync(oldSrc);
	}
}`

[MaxymGorn]

If that doesn't help, you can make a test repository that reproduces this error and then see what's wrong, I think this is the best solution for this problem so far

[kwoeste11]

It doesn't surprise me that you can't recreate it in the demo app since I couldn't either. I do get two console errors when it fails only. otherwise none. I see the waiting for server message on screen before these two errors so I took it as related to it getting hung up.

when debugging the code, it just never returns from the call. terminates that function effectively.

I have tried various browsers and it doesn't seem specific to any one.

I have a pretty minimal test project already, so I can try and put it out on github and get you access. Haven't done that before so I need to work through that. Everything I have done on github is through our internal org and I can't expose that.

let me see what I can get out here. Then see if I can get you able to access it.

[kwoeste11]

I pushed the code to the following repo. It is public so you should be able to get to it.

https://github.com/kwoeste11/CropperImageError

The test images are at wwwroot/img/theseDoNotWork and wwwroot/img/TheseWork.

Changing the following code results in the behavior in the comments

` GetCroppedCanvasOptions getCroppedCanvasOptions = new()
{
// works for all
// MaxHeight = 1024,
// MaxWidth = 1024

		// does not work for Cano, but works for Roxie
		// MaxHeight = 2048,
		// MaxWidth = 2048

		// does work for either Cano or Roxie, but works for Sully and Thomas
		MaxHeight = 4096,
		MaxWidth = 4096
	};`

Any questions, just let me know. Make sure you have a c:\temp folder or that you change the folder it writes the images to. You can get rid of the write code if you debug it via Visual Studio and just set a breakpoint on the line

var data = await croppedCanvas!.JSRuntimeObjectRef.InvokeAsync<string>("toDataURL", srcType, 1);

for the images that have an issue it never returns from this line.

Thanks for all your help !

[kwoeste11]

found the issue. I had set the message max as was in the docs

I had

builder.Services.AddServerSideBlazor() .AddHubOptions(options => { options.MaximumReceiveMessageSize = 32 * 1024 * 100; });

Changing it to what is below solved the issue

builder.Services.AddServerSideBlazor() .AddHubOptions(options => { options.MaximumReceiveMessageSize = 1024 * 1024 * 100; });

[MaxymGorn]

It looks obvious since you are using blazor server. But with the increase of this variable you need to be careful, because it can lead to security errors and more vulnerable to ddos ​​attacks

[MaxymGorn]

Previously I'm used similar configurations in examples "projects": https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/examples/Cropper.Blazor.Server.Net7/Program.cs#L10. Maybe it can be helpful too. I gathering investigate about this detail in next several days. Obviously, the image must have the allowed dimensions for the processing you have set, but this can greatly affect performance.

[MaxymGorn]

In your case, the picture exceeded 10 MB, so this limit really needed to be increased

[kwoeste11]

on disk the problem photos were 4.3mb and 2.7mb. But they must grow when cropped. not sure how to know what the right value would be for our images. As for the security portion, this app is going to be an internal only app and behind our firewall. That should mitigate any potential issues by increasing this value.

The only real reason I need to get it this way is that the built in resizing doesn't have a good enough image quality for our needs if I let the library do the resizing.

I will experiment with the settings you provided in the link and see if any of those help without just increasing the receive size so much.

Thanks for all your help !