Het verplaatsen van de gegevens naar de cloud is een de-facto praktijk geworden tijdens het implementeren van web- en mobiele apps. Cloudinfrastructuren zoals Amazon AWS en Google Cloud zijn goed in het beschikbaar houden en beschikbaar houden van de gegevens - en dat is waar de ontwikkelaars naar verlangen. In tegenstelling tot andere soorten gegevens biedt het opslaan van afbeeldingen en andere media in de cloud extra voordelen. Dit omvat server-side optimalisatie en manipulatie, real-time mediastreaming en snellere levering. Dit artikel leert je hoe je afbeeldingen in de cloud kunt duwen en optimalisatie kunt maken tijdens het gebruik van twee populaire cloudtechnieken.

Methode één van de twee:
AWS S3 en Lambda gebruiken

  1. 1 AWS S3 instellen. Ga aan de slag met het instellen van uw AWS S3-bucket als u er nog geen hebt gemaakt. Met Amazon S3 kun je elke hoeveelheid gegevens opslaan en maximaal 5 GB gratis. Bekijk het artikel over Uploaden naar Amazon S3 om uw AWS S3-account in te stellen en te configureren. Als u klaar bent, maakt u twee mappen in uw bucket en geeft u deze de naam van het originele en het formaat ervan. Zoals de naam al doet vermoeden, slaat de oorspronkelijke map de originele afbeelding op terwijl de map met gewijzigde grootte de gewijzigde afbeelding opslaat.
  2. 2 Schrijf de optimalisatiecode. We gaan gebruiken async, AWS-sdk, gm, en pad libs voor de demo-optimalisatiecode. U moet eerst het knooppunt en alle afhankelijkheden installeren en daarna de volgende code kopiëren imageResizer.js. 
     // afhankelijkheden var async = vereisen('Asynchrone'); var AWS = vereisen('AWS-sdk'); var gm = vereisen('G') .subklasse( Imagemagick: waar ); // Schakel ImageMagick-integratie in. var util = vereisen('Util'); var pad = vereisen('pad'); // constanten var WEB_WIDTH_MAX = 150; var WEB_HEIGHT_MAX = 150; var imageResponse; // vraag een verwijzing naar de S3-client  var s3 = nieuwe AWS.S3(); export.handler = functie(evenement, context, Bel terug)  // Lees opties van het evenement. troosten.logboek("Leesopties van evenement:\ n", util.inspecteren(evenement, diepte: 5)); var srcBucket = evenement.archief[0].s3.emmer.naam; // Object sleutel kan spaties of Unicode niet-ASCII-tekens bevatten. var srcKey = decodeURIComponent(evenement.archief[0].s3.voorwerp.sleutel.vervangen(/ \ + / G, " ")); // var dstBucket = srcBucket + "-resized"; var imageName=pad.basename(srcKey); var dstBucket = srcBucket; var imageResponse ; // Leid het afbeeldingstype samen. var typeMatch = srcKey.bij elkaar passen(/\.([^.]*)$/); als (!typeMatch)  Bel terug("Kon het afbeeldingstype niet bepalen."); terugkeer;  var Beeldtype = typeMatch[1]; als (Beeldtype.toUpperCase() != "Jpg".toUpperCase() && Beeldtype.toUpperCase() != "Png".toUpperCase() && Beeldtype.toUpperCase() != "Jpeg".toUpperCase())  Bel terug('Niet-ondersteund afbeeldingstype: $ imageType'); terugkeer;  functie uploadWebMax(antwoord, buffer, volgende)  // Stream de getransformeerde afbeelding naar een andere S3-bucket. var dstKeyResized = "Verkleind /"+imageName; s3.putObject( Emmer: dstBucket, Sleutel: dstKeyResized, Lichaam: buffer, ContentType: respons.ContentType , functie(dwalen, gegevens)  als (dwalen)  troosten.logboek(dwalen, err.stack); anders troosten.logboek('geüpload naar web-max met succes !!'); volgende(nul, antwoord, buffer);  );
  3. 3 Configureer AWS Lambda. Vervolgens moet u zich aanmelden bij de AWS-console en Lambda selecteren bij de services. Selecteer op de Lambda-pagina de knop 'create the lambda function'.
  4. 4 Maak een Lambda-functie voor het optimaliseren van afbeeldingen. U wordt gevraagd om een ​​blauwdruk te selecteren. Klik op de lege functie.
    • Configureer trigger. U wordt gevraagd om een ​​trigger toe te voegen die de lambda-functie oproept. Kies hier S3.
    • Selecteer de bucket die we eerder hebben gemaakt. Stel het gebeurtenistype in op Gemaakt object (Alle) en het voorvoegsel op origineel /. Druk op Volgende.
    • Kies een functienaam. Selecteer zip voor code-invoer en gebruik de zip die we eerder hebben gemaakt. De alternatieve inline-optie kan gebruiken als er geen afhankelijkheden zijn.
  5. 5 Stel de IAM-rollen in. Nu moet je de handler-naam en de IAM-rol voor Lambda invullen. Wijzig in het veld "Lambda-functiehandler en -rol" de naam van de handler in imageResizer.js. De naam van het js-bestand in onze zip en de handler moet overeenkomen. Selecteer op het tabblad Rollen de optie aangepaste rol. U kunt hier nieuwe rollen definiëren en hier een beleid aan toevoegen.
  6. 6 Gedaan. Druk in het laatste scherm op de functieknop Maken. Gefeliciteerd, je hebt met succes een lambda-functie gemaakt die een afbeelding optimaliseert en deze vervolgens verplaatst naar de map met gewijzigde afmetingen. U kunt nieuwe afbeeldingen POSTEN naar de originele bucket en de aangepaste versie van de afbeelding uit de aangepaste bucket halen.

Methode twee van twee:
Cloudinary en Node.js gebruiken

  1. 1 Stel uw account in en configureer het. Net als bij S3, heeft Cloudinary een gratis niveauplan dat je kunt gebruiken. Nadat u bent ingelogd, noteert u de cloud_name, API sleutel, en de api_secret.
  2. 2 Voeg de cloud-bibliotheek toe aan uw project. We zullen een voorbeeldproject Node.js maken om te laten zien hoe het werkt. Installeer node.js als je dat nog niet hebt gedaan. Maak vervolgens een map voor dit project en installeer de afhankelijkheden met behulp van npm. 
     npm installeren cloudinary
  3. 3 Configureer de inloggegevens. Importeer de afhankelijkheden in uw knooppuntproject en configureer de inloggegevens die u in stap 1 hebt genoteerd. 
     cloudinary.config( cloud_name: 'monster', API sleutel: '874837483274837', api_secret: 'A676b67565c6767a6767d6767f676fe1' );
  4. 4 Maak een upload-functie. Schrijf een uploadfunctie die een asynchroon verzoek doet naar de cloud-server. We gaan een statische afbeelding gebruiken, maar voor praktische doeleinden wordt de uploadfunctie opgeroepen bij het indienen van formulieren. U kunt ook van de client-zijde onmiddelijk uploaden door een AJAX-oproep te doen. U kunt meer lezen over het uploaden van AJAX-bestanden op hun documentatiepagina. 
     functie uploaden(het dossier, opties, Bel terug)  cloudinary.v2.uploader.uploaden("/home/my_image.jpg", functie(fout, resultaat) troosten.logboek(resultaat));
  5. 5 Begrijp het antwoord van de server. Cloudinary wijst een openbare id en een URL toe die u kunt gebruiken om naar de geüploade bron te verwijzen. Omdat de pubic_id synoniem is aan de naam van de afbeelding, kunt u de public_name instellen tijdens het uploaden van de afbeelding. Zodra u klaar bent met het uploaden van het bestand, krijgt u een return-object dat er als volgt uitziet: 
      public_id: 'Cr4mxeqx5zb8rlakpfkg', versie: 1372275963, handtekening: '63bfbca643baa9c86b7d2921d776628ac83a1b6e', breedte: 864, hoogte: 576, formaat: 'Jpg', resource_type: 'beeld', gemaakt bij: '2017-06-26T19: 46: 03Z', bytes: 120253, type: 'uploaden', url: 'Https://res.cloudinary.com/demo/image/upload/v1372275963/cr4mxeqx5zb8rlakpfkg.jpg', SECURE_URL: 'Https://res.cloudinary.com/demo/image/upload/v1372275963/cr4mxeqx5zb8rlakpfkg.jpg'
  6. 6 Optimaliseer de afbeelding: Voor het optimaliseren van de afbeelding zijn er meerdere manieren waarop u dit kunt doen - met behulp van de URL of de cloudinaire bibliotheek.
    • De afbeelding optimaliseren met behulp van de URL. U kunt de grootte, dimensie, kwaliteit en vele andere eigenschappen van de afbeelding wijzigen door een verzoek naar de daadwerkelijke afbeeldings-URL te verzenden. De getransformeerde afbeeldingen worden op verzoek gemaakt en teruggestuurd naar uw knooppuntserver. Hier is een voorbeeld van beeldoptimalisatie in actie: 
       https://res.cloudinary.com/demo/image/upload/q_60/sample.jpg
    • Het optimaliseren van de afbeelding met behulp van de bibliotheekmethode. U kunt ook de bibliotheekmethode gebruiken om de transformatie te maken. Het eerste argument is de public_id van de afbeelding en een tweede parameter is een object dat uit de optimalisatieparameters bestaat. 
       cloudinary.image ("sample.jpg", kwaliteit: 50)
  7. 7 Dat is het. U hebt een volledig werkende on-the-fly oplossing voor beeldmanipulatie die is geïntegreerd in uw knooppunttoepassing.