Получите и сохраните ajax размещенное изображение в c # - PullRequest
1 голос
/ 14 июля 2020

Я новичок в разработке, поэтому, пожалуйста, извините за мое незнание. Я использую пример cropper. js для публикации кадрированного изображения на внутреннем сервере. Мне нужно получить сообщение на стороне сервера и сохранить данные как изображение. Моя функция обрезки приведена ниже:

          document.getElementById('crop').addEventListener('click', function () {
              var initialAvatarURL;
              var canvas;

              $modal.modal('hide');

              if (cropper) {
                  canvas = cropper.getCroppedCanvas({
                      width: 160,
                      height: 160,
                  });
                  initialAvatarURL = avatar.src;
                  avatar.src = canvas.toDataURL();
                  $progress.show();
                  $alert.removeClass('alert-success alert-warning');
                  canvas.toBlob(function (blob) {
                      var formData = new FormData();

                      formData.append('avatar', blob, 'avatar.jpg');
                      $.ajax('http://localhost:1233/http://localhost:1234/test', {
                          method: 'POST',
                          data: formData,
                          processData: false,
                          contentType: false,

                          xhr: function () {
                              var xhr = new XMLHttpRequest();

                              xhr.upload.onprogress = function (e) {
                                  var percent = '0';
                                  var percentage = '0%';

                                  if (e.lengthComputable) {
                                      percent = Math.round((e.loaded / e.total) * 100);
                                      percentage = percent + '%';
                                      $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                                  }
                              };

                              return xhr;
                          },

                          success: function () {
                              $alert.show().addClass('alert-success').text('Upload success');
                          },

                          error: function () {
                              avatar.src = initialAvatarURL;
                              $alert.show().addClass('alert-warning').text('Upload error');
                          },

                          complete: function () {
                              $progress.hide();
                          },
                      });
                  });
              }

Я использую прокси-сервер cors -where nodejs действительно решает проблемы cors для тестирования. У меня есть пример слушателя в c# ниже:

namespace httplistenerexample
{
    class Program
    {
        static void Main(string[] args)
        {
            StartServer();
            Console.ReadKey();
        }

        public static void StartServer()
        {
            var httpListener = new HttpListener();
            var simpleServer = new SimpleServer(httpListener, "http://127.0.0.1:1234/test/", ProcessYourResponse);
            simpleServer.Start();
        }

        public static byte[] ProcessYourResponse(string test)
        {
            Console.WriteLine(test);
            return new byte[0]; // TODO when you want return some response
        }

        public delegate byte[] ProcessDataDelegate(string data);

        public class SimpleServer
        {
            private const int HandlerThread = 2;
            private readonly ProcessDataDelegate handler;
            private readonly HttpListener listener;

            public SimpleServer(HttpListener listener, string url, ProcessDataDelegate handler)
            {
                this.listener = listener;
                this.handler = handler;
                listener.Prefixes.Add(url);
            }

            public void Start()
            {
                if (listener.IsListening)
                    return;

                listener.Start();

                for (int i = 0; i < HandlerThread; i++)
                {
                    listener.GetContextAsync().ContinueWith(ProcessRequestHandler);
                }
            }

            public void Stop()
            {
                if (listener.IsListening)
                    listener.Stop();
            }

            private void ProcessRequestHandler(Task<HttpListenerContext> result)
            {
                var context = result.Result;

                if (!listener.IsListening)
                    return;

                // Start new listener which replace this
                listener.GetContextAsync().ContinueWith(ProcessRequestHandler);

                // Read request
                string request = new StreamReader(context.Request.InputStream).ReadToEnd();

                // Prepare response
                var responseBytes = handler.Invoke(request);
                context.Response.ContentLength64 = responseBytes.Length;

                var output = context.Response.OutputStream;
                output.WriteAsync(responseBytes, 0, responseBytes.Length);
                output.Close();
            }

        }




    }
}

Я могу видеть данные изображения на экране через console.writeline в методе ProcessYourResponse, но не могу понять, как получить данные и сохраните его как файл. В настоящее время я отправляю данные в виде большого двоичного объекта, поэтому мне кажется, что мне нужно будет использовать поток для получения двоичных данных. Это лучший способ, или я должен опубликовать данные в виде строки base64 и получить их с помощью streamreader. Короче говоря, мне нужен метод ProcessYourResponse для сохранения данных изображения в файл. Мне действительно нужна помощь, так как я борюсь с этим уже несколько недель. Заранее спасибо.

...