Estoy enviando distintas imágenes desde un dispositivo android con una aplicación hibrida desarrollada en Ionic. Mi servicio que recibe las imágenes está desarrollado en C# con WCF y el código es el siguiente:
int files = HttpContext.Current.Request.Files.Count;
for (int i = 0; i < files; i++)
{
HttpPostedFile file = HttpContext.Current.Request.Files[i];
if (file == null)
return null;
string targetFilePath = WebConfigurationManager.AppSettings["FilePath"] + file.FileName;
file.SaveAs(targetFilePath);
}
Esto funciona muy bien para mí, pero se me presento un problema. La mayoría de las imágenes que se seleccionan desde la galería del dispositivo son muy pesadas, he probado con 4 imágenes sin problemas, pero tuve que probar con 7 y ahí es donde recibo el error 413 de parte de mi servicio. Configure en mi Web.Config el tamaño máximo:
<webHttpBinding>
<binding maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" transferMode="Streamed"/>
</webHttpBinding>
Sin embargo, persiste el error y decidí por el lado de redimensionar las imágenes o comprimir, no sé cuál sea el mejor caso.
Las imágenes son cargadas con <input type="file>
.
Lo que necesito es poder darle un tamaño específico a las imágenes. Encontre este ejemplo, lo aplique pero sin resultado. Las imágenes no se suben.
var file = event.target.files[0];
// Ensure it's an image
if (file.type.match(/image.*/)) {
console.log('An image has been loaded');
// Load the image
var reader = new FileReader();
reader.onload = function(readerEvent) {
var image = new Image();
image.onload = function(imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 544, // TODO : pull max size from a site config
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var resizedImage = dataURLToBlob(dataUrl);
$.event.trigger({
type: "imageResized",
blob: resizedImage,
url: dataUrl
});
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
Entiendo que este código envía los datos al trigger del botón que se encarga de subir las imágenes al servidor. Sin embargo yo tengo 2 o 4 o 7 imágenes por lo que esto no aplica en mi caso.
web.config
(similar a como tú los pones) pero IIS no estaba usando dicha configuración por un problema de nombrado del endpoint WCF.