Cargador de imágenes nubladas -

Por (patrocinador) en

Durante los últimos meses, detalló cómo los desarrolladores pueden completar una variedad de tareas utilizando Cloudinary, un proveedor de alojamiento, entrega y transformación de imágenes (y audio y video). Las bibliotecas de integración del lado del cliente y los SDK de Cloudinary simplifican la integración con la plataforma de desarrollo que elija: Ruby on Rails, PHP, Node.js, Angular, .NET, Python Django, jQuery, Java, Scala, Android, iOS y más. Una vez que se haya registrado para obtener una cuenta de Cloudinary, puede cargar sus imágenes usando una de sus muchas API, pero hoy le presentará su Image Uploader, un método para cargar medios de cualquier usuario directamente a Cloudinary, evitando así el suyo. Servidores que pueden aligerar el rendimiento y ahorrarle tiempo.

configuración

Comience iniciando sesión en su cuenta (¡o registrándose!), visitando la página de Configuración y haga clic en “Habilitar carga sin firmar”.

Se le proporcionará una cadena preestablecida de carga, que le permitirá cargar imágenes en Cloudinary sin exponer su clave API.

Cargador de imágenes jQuery

Cloudinary permite a los desarrolladores cargar imágenes proporcionadas por el usuario (o “no firmadas”, ya que el titular de la cuenta no las carga) directamente a Cloudinary; no es necesario que su servidor maneje nada de eso. Cloudinary proporciona un complemento jQuery para todo este trabajo, así que agrega esos recursos de JavaScript a la página:

script src="https://soloprogramadores.top/cargador-de-imagenes-nubladas/jquery.min.js" type="text/javascript"/scriptscript src="jquery.ui.widget.js" type="text/javascript"/scriptscript src="jquery.iframe-transport.js" type="text/javascript"/scriptscript src="jquery.fileupload.js" type="text/javascript"/scriptscript src="jquery.cloudinary.js" type="text/javascript"/script

$.cloudinarySe agrega un objeto a jQuery que contiene una serie de métodos útiles para recuperar e incluso enviar imágenes a Cloudinary; Para enviar cargas a Cloudinary desde el lado del cliente, primero agregue el widget de carga de Cloudinary a su formulario:

$('#upload_form').append( // Primero "cargar cadena preestablecida", luego el nombre de su nube $.cloudinary.unsigned_upload_tag('zcudy0uz', { cloud_name: 'demo' }));

La carga se activa después de seleccionar (o arrastrar) un archivo. inputSe agrega automáticamente un campo a su formulario cuyo valor identifica la imagen cargada para hacer referencia en su otro código. cloudinarydoneTambién se le proporcionarán cloudinaryprogresseventos durante las etapas de carga, a la:

/*    Events!        - Update a progress bar upon "cloudinaryprogress" event        - Add new thumbnail image to gallery when complete!*/$('.upload_field').unsigned_cloudinary_upload('zcudy0uz',   { cloud_name: 'demo', tags: 'browser_uploads' },   { multiple: true }).bind('cloudinaryprogress', function(e, data) {   $('.progress_bar').css('width',     Math.round((data.loaded * 100.0) / data.total) + '%'); }).bind('cloudinarydone', function(e, data) {  // Image upload complete!  Add it to gallery with nice animation!  $('.thumbnails').append($.cloudinary.image(data.result.public_id,     { format: 'jpg', width: 150, height: 100,       crop: 'thumb', gravity: 'face', effect: 'saturation:50' } ))});

cyber

Cloudinary’s CORS settings allow for the cross-origin uploadandthe image uploader supports all major browsers! If you’d like to see the image uploader in action, check out thissample photo album project.

Uploading to Cloudinary withinNative Mobile OS

If you provide a mobile app,whether for iOS or Android, you canalso use Cloudinary’s APIfor unsigned image uploads:

Android

InputStream getAssetStream(String filename) throws IOException {  return getInstrumentation().getContext().getAssets().open(filename);}Map config = new HashMap();config.put("cloud_name", "demo");Cloudinary cloudinary = new Cloudinary(config);cloudinary.uploader().unsignedUpload(getAssetStream("sample.jpg"), "zcudy0uz",   Cloudinary.asMap("public_id", "user_sample_image_1001", "tags", "android_upload"));

iOS

NSData *imageData = [NSData dataWithContentsOfFile:imageFilePath];[uploader unsignedUpload:imageData uploadPreset:@"zcudy0uz" opciones:[NSDictionary DictionaryWithObjectsAndKeys:@"user_sample_image_1002", @"public_id", @"tags", @"ios_upload", nil] withCompletion:^(NSDictionary *successResult, NSString *errorResult, código NSInteger, contexto de identificación) { if (successResult) { NSString* publicId = [successResult valueForKey:@"public_id"]; NSLog(@"Carga exitosa. ID pública=%@, Resultado completo=%@", publicId, SuccessResult); CLTransformación *transformación = [Transformación CLTransformación]; [transformación setWidthWithInt: 150]; [transformación setHeightWithInt: 100]; [transformación setCrop: @"fill"]; [conjunto de transformaciónGravity:@"cara"]; NSLog(@"Resultado: %@", [url cloudinary:opciones de publicId:@{@"transformación": transformación, @"formato": @"jpg"}]); } else { NSLog(@"Error de carga: %@, %d", errorResult, código); } } andProgress:^(NSInteger bytesWritten, NSInteger totalBytesWritten, NSInteger totalBytesExpectedToWrite, id context) { NSLog(@"Progreso de la carga: %d/%d (+%d)", totalBytesWritten, totalBytesExpectedToWrite, bytesWritten); }];

Cloudinary lo tiene cubierto para la carga masiva de imágenes tanto en la web como en el servidor y en el dispositivo móvil: ¡un proveedor completo!

El contenido proporcionado por el usuario, especialmente en el caso de los medios, puede resultar difícil de manejar. Ya sea almacenamiento, entrega u optimización, manejarlos por su cuenta puede ser un desastre; Múltiples servicios, seguridad, optimización, alojamiento, etc. Cloudinary, con sus API flexibles, puede ayudar. ¡Echa un vistazo a Cloudinary hoy!