Estoy usando AJAX para enviar una serie de imágenes a un servidor y escribirlas en el lado del servidor.
Quiero que esto sea lo más eficiente posible , y estoy bastante seguro de que lo que estoy haciendo ahora es malo :
string[] no es eficiente.JSON.stringify para encadenar los datos de la imagen es una mala idea.Convert.FromBase64String en el lado del servidor no es eficiente.Aquí está mi código del lado del cliente :
Esto captura la imagen de un elemento de lienzo y la agrega a una matriz:
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); imagesArr.push(canvas.toDataURL('image/jpeg', JPEG_QUALITY).replace('data:image/jpeg;base64,', ''))Esto envía la matriz de imágenes al servidor:
function sendImageBlock() { $.ajax({ type: "POST", url: "/AJAXServices.aspx/Upload", data: JSON.stringify({images: imagesArr }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) {}, error: function (xhr, status, message) {} }); }Aquí está mi código del lado del servidor :
[WebMethod] public static int Upload(string[] images) { int index = 0; foreach (string image in images) { File.WriteAllBytes(string.Format("{0}.jpeg", index.ToString(), Convert.FromBase64String(image)); index++; } } ¿Alguna sugerencia de cómo puedo mantener esto limpio y eficiente ? ¿Eliminar el uso del formato de string y usar datos binarios ?
Puede usar Uint32Array junto con xhr2 (HTML5 XMLHttpRequest Level 2) para enviar sus datos en su formato binario original.
XMLHttpRequest Level 2 presenta una serie de nuevas capacidades que acaban con los hacks locos en nuestras aplicaciones web; cosas como solicitudes de origen cruzado, eventos de progreso de carga y soporte para cargar/descargar datos binarios.
Más información: https://www.html5rocks.com/en/tutorials/file/xhr2/
(function ($) { // fetch the canvas data buffer into an Uint32Array var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var data= new Uint32Array(imageData.data.buffer); $.ajax({ url: 'server_address', type: 'POST', contentType: 'image/png', // set processData to false to prevent string converstion processData: false, data:data }); })(jQuery);Los datos del blob se pueden leer en PHP de esta manera:
<php> $data = file_get_contents('php://input'); </php>