Cargador de imágenes nubladas - » HostIN
Por (patrocinador) en Durante los últimos meses, detalló cómo los desarrolladores pueden…
- HostIN
- Programación
- Cargador de imágenes nubladas -
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.
Índice de contenidos
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!
Te podría interesar...
Cómo solucionar el error 408 de tiempo de espera de la solicitud - [8 Easy Fixes] Chargebee: un software para conectarse a sus pasarelas de pago 9 mejores constructores de sitios web con IA en 2024 Alojamiento VPS económico para mayor tráfico | Mayor escalabilidad 10 excelentes agencias de microstock - Los 3 mejores complementos de CRM de WordPress Todo lo que necesitas saber sobre SEO para 2024 ¿Por qué WordPress es una buena primera plataforma para estudiantes? ThisHosting.Rocks Acceda a la cámara Mac mediante la línea de comando -
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.