如何使用 Blazor 从 Javascript 中获取 blob

Question

我正在使用SixLabors.ImageSharp 使用 Javascript JQuery 裁剪图像，一切正常，但是当我需要裁剪图像时，我不知道如何在不刷新页面且不执行 POST 的情况下获取图像.

我正在使用Tutexchange 教程，他们通过 POST 方法获取图像（我不想那样做）我想运行一个方法并使用 Blazor 获取文件编码的 base64 但是当我这样做时无法获得reader.result，因为它位于 onloadend 事件中。 如何在没有 POST 方法且不将图像保存在文件夹中以使用 Blazor 读取的情况下获取图像 blob？

我尝试使用方法传递 onloadend reader.result 并使用 bucle 等待，而在完成时返回它，但值永远不会与 null 不同，我测试了裁剪器是否使用 console.log() 和一切都很好：

function InitializeCroppie(div_width, div_height) {
basic = $('#main-cropper').croppie
    ({
        enableExif: true,
        url: '/images/ChooseImage.png',
        viewport: { width: div_width, height: div_height },
        boundary: { width: div_width, height: div_height },
        showZoomer: false,
        format: 'png' //'jpeg'|'png'|'webp'
    });
//Reading the contents of the specified Blob or File
function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#main-cropper').croppie('bind', {
                url: e.target.result
            });
        }
        reader.readAsDataURL(input.files[0]);
    }
}

// Change Event to Read file content from File input
$('#select').on('change', function () { readFile(this); });
}

var returnThisValue;
async function GetImageCroped() {
  returnThisValue = null;
  var blob = await basic.croppie('result', 'blob');
  var reader = new FileReader();
  if (blob != null) {
    reader.readAsDataURL(blob);
    reader.onloadend = function () {
        SetValue(reader.result);
        console.log(reader.result);
    }
  }

  while (returnThisValue == null) {
    //Waiting...
  }

  return returnThisValue;
}

function SetValue(value) {
  returnThisValue = value;
}

function GetImageValue() {
  return returnThisValue;
}

如果没有 POST 方法是不可能的，我如何在不重新加载页面的情况下接收它。

编辑： 我正在做一些测试，以了解 js 是否有可能让 blazor 知道何时将图像放入 localStorage 以使其与 Blazor 同步。 测试后：我尝试使用 Blazored.LocalStorage 获取图像，但 Chrome 无法解决“大数据”问题。

Answer 1

您可以添加 JavaScript 侦听器事件。更新本地存储时会触发另一个事件。它应该在页面初始化时加载。

var orignalSetItem = localStorage.setItem;
localStorage.setItem = function (key, newValue) {
    var setItemEvent = new Event("setItemEvent");
    setItemEvent.key = key;
    setItemEvent.newValue = newValue;
    window.dispatchEvent(setItemEvent);
    orignalSetItem.apply(this, arguments);
};
window.addEventListener("setItemEvent", function (e) {
    if (e.key == 'image') {
        var _this = localStorage.getItem("image")
        if (_this != e.newValue) {
            console.log(e.newValue)
            //call method which sends this blob
        } else {
            console.log('key->');
            console.log(e.newValue)
        }
    }
});

触发方法。

 $('#btnupload').on('click', function ()
{ 
    basic.croppie('result', 'blob').then(function (blob)
    {
        localStorage.setItem('image', blob)
        //...
    });
});