Blazor Server (.NET 5) - 获取 croppie 的图像 src 的值到 Blazor Server 页面 - Javascript

Question

我们已经创建了一个Blazor服务器应用程序与。净5框架，它有一个功能，可以上传图像并裁剪应该上传的部分，我们使用的是croppie.js，我尝试了下面的代码，当图像裁剪后，然后保存，我所使用的方法是使用javascript获取图像的src，这是由我的方法在Blazor服务器页面内调用，这是我的代码。

Javascript:

function getImgSrc() {
debugger;
var GetValue = document.getElementById('my-img').src;
return GetValue;
}

我的Blazor服务器端页面代码(Index.razor.cs)

public async Task SavePhoto()
{
string GetSRC = await jSRuntime.InvokeAsync<string>("getImgSrc");
string path = _hostingEnvironment.WebRootPath + "/images/" + fileName;
byte[] imageBytes = Convert.FromBase64String(GetSRC);
File.WriteAllBytes(path, imageBytes);
return;
}

然后，当我运行应用程序，裁剪图像并保存它时，它会导致一个错误，唯一的错误消息显示如下:

错误:Connection disconnected with Error 'Error: Server return a Error on close: Connection closed with a Error .

是否有人尝试使用croppie在Blazor Server？ 你是否成功地从图像标签的src获得了图像??

我希望有人能帮我一下。

谢谢大家

Answer 1

给后来者。文档cproppie.js https://foliotek.github.io/Croppie/

index . html

<link href="lib/croppie/croppie.min.css" rel="stylesheet" />
<script src="lib/croppie/croppie.min.js"></script>
<script src="js/app.js"></script>

app.js

var resize;
var base64data;
window.Crop = {
image: function (component) {
setTimeout(() => {
var cor = document.getElementById('upload-demo');
resize = new Croppie(cor, {
enableExif: true,
viewport: {
width: 150,
height: 150,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
var input = document.getElementById('upload').files[0];
if (input) {
var reader = new FileReader();
reader.onload = function (e) {
//document.getElementsByClassName('upload-demo').classList.add('ready');
resize.bind({
url: e.target.result
});
}
reader.readAsDataURL(input);
}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}, 150);
},
responses: function (component) {
resize.result('blob').then(function (blob) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = async function () {
base64data = reader.result;
var i = document.getElementById('result');
var img = document.createElement('img');
img.src = base64data;                
i.appendChild(img);
return component.invokeMethodAsync('ResponseMethod',base64data); 
}
});

}
};

剃刀页

@page "/"
@inject IJSRuntime JS
@inject IHttpClientFactory ClientFactory
@using BlazorCroppieExample.Shared
<PageTitle>Index</PageTitle>
<div class="form-group">
<div class="custom-file">
<input id="upload" accept="image/*" type="file" class="custom-file-input" @onchange="Upload">            
</div>
</div>
<div class="upload-demo">
<div class="upload-msg">Croppie</div>
<div class="upload-demo-wrap">
<div id="upload-demo"></div>
</div>
</div>
<button class="upload-result" @onclick="Up">Abr</button>
<div id="result"></div>
<img id="result-img" src="">

@code {
FileUpload model { get; set; } = new();    
HttpClient NoAuthenticationClient;
async Task Upload()
{
await JS.InvokeVoidAsync("Crop.image", DotNetObjectReference.Create(this));
}
async Task Up()
{
await JS.InvokeVoidAsync("Crop.responses", DotNetObjectReference.Create(this));
}
[JSInvokable]
public async void ResponseMethod(string data)
{
model.Avatar = data;
await UploadServer();
StateHasChanged();
}
async Task UploadServer()
{
NoAuthenticationClient = ClientFactory.CreateClient("BlazorCroppieExample.NoAuthenticationClient");
await NoAuthenticationClient.PostAsJsonAsync<FileUpload>("WeatherForecast", model);
}
}

FileUpload类

public class FileUpload
{
public string Avatar { get; set; }
}

控制器

[HttpPost]
public async Task<ActionResult> PostFile(FileUpload model)
{
try
{
string name = Guid.NewGuid().ToString();
string file = null;
if (!string.IsNullOrEmpty(model.Avatar))
{
ProcessImage(model.Avatar, name);
file = "Uploads/" + name + ".png";
}
return Ok();
}
catch
{
return Problem();
}            
}
private string ProcessImage(string croppedImage, string name)
{
string filePath = String.Empty;
try
{
string base64 = croppedImage;
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
filePath = Path.Combine("Uploads/" + name + ".png");
using (FileStream stream = new FileStream(Path.Combine(_environment.WebRootPath, filePath), FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
}
catch (Exception ex)
{
string st = ex.Message;
}
return filePath;
}

工作示例https://github.com/blakcat76/BlazorCroppieExample

Answer 2

我通过不使用blazor组件页面后面的代码来解决这个问题，我使用javascript, json/ajax和webapi来保存图像，然后使用后面的代码来显示图像，但我必须为此强制重新加载页面。我们的团队目前希望在blazor背后的代码上避免blob，以使我们的应用程序尽可能轻量级。

谢谢大家。