Bildhelfer-API

Die statische ImageHelper-Klasse (in @microsoft/sp-image-helper) wurde hinzugefügt, um SPFx-Entwicklern den Laufzeitzugriff auf Folgendes zu ermöglichen:

• URLs automatisch generierter Miniaturansichten von Seiten und Dokumenten, die in SharePoint gespeichert sind
• Optimierten Urls zu in SharePoint gespeicherten Bildern

Die Hilfsmethode ImageHelper.convertToImageUrl() verwendet eine URL zu einer Ressource auf SharePoint, einer Breite und einer optionalen Höhe und führt clientseitige Vorgänge aus, um zu versuchen, eine optimierte URL zu erstellen.

Die resultierende URL verweist auf ein Bild, das der angeforderten Größe nahe kommt. Die resultierende URL umfasst auch die Verwendung anderer SharePoint Medien- und Graph-Dienste. Falls für die angeforderte Ressource verfügbar, öffentliche oder private CDN-Speicherorte, um die angepasste Bildgröße und Miniaturansichten zu verwenden.

Vorteile der Verwendung dieser API

• Das Image kann schneller bereitgestellt werden, da es möglicherweise aus einem Cache bereitgestellt wird.
• Das Bild wird entsprechend angepasst, da die Breite erforderlich ist und die Höhe optional ist. Auf diese Weise können Kunden Bilder mit hoher Auflösung in SharePoint speichern, zahlen aber keine Zeitstrafe für den Download, wenn diese Bilder verwendet werden.
• Die Quell-URL kann ein beliebiger Dateityp in SharePoint sein, in dem eine Miniaturansicht generiert werden kann. Anschließend wird eine Miniaturansicht-URL zurückgegeben.

Explained – ImageHelper.convertToImageUrl()

Die convertToImageUrl() statische Methode akzeptiert ein einzelnes Argument vom Typ IImageHelperRequest. Dieses Objekt verfügt über zwei erforderliche Eigenschaften sourceUrl&widthund eine optionale Eigenschaft height.

Die serverseitige Bildverarbeitung von SharePoint verfügt über eine Liste der unterstützten Auflösungshaltepunkte, einschließlich: 200, 400, 960, 1600, & 2560.

Während Sie eine beliebige Breite angeben können, auf die die Größe des Bilds geändert werden soll, wählt SharePoint den nächstgelegenen größten Auflösungshaltepunkt aus. Wenn Sie beispielsweise width: 250 angeben, beträgt die Breite des skalierten Bilds 400 Pixel.

Wenn Sie die optionale height-Eigenschaft angeben, wird die Breite nicht an den nächsten Haltepunkt angepasst. Wenn die height -Eigenschaft jedoch nicht angegeben wird, bestimmt SharePoint automatisch die Höhe des Bilds mit dem Breakpoint für die Höhe & der Breite, wobei das Seitenverhältnis für das Bild beibehalten wird.

Verwenden der Bildhilfs-API

Um die Bildhilfs-API zu verwenden, müssen Sie sie zuerst in Ihrem Projekt installieren:

npm install @microsoft/sp-image-helper

Importieren Sie sie als Nächstes in Ihr Projekt, in dem Sie die API verwenden möchten:

import { ImageHelper, IImageHelperRequest } from "@microsoft/sp-image-helper";

Verwenden Sie als Nächstes die API, um ein Miniaturbild einer vorhandenen Datei in SharePoint abzurufen. In diesem Fall haben wir eine Datei von der Microsoft News Image Gallery-Website hochgeladen. In diesem Beispiel verwenden wir eine Datei mit einer Größe von 1,2 MB mit einer Auflösung von 1920 x 1080, die kein ideales webfreundliches Format ist:

Die Datei ist in der standardmäßigen Dokumente-Bibliothek unserer Website vorhanden:

const originalImageUrl = '/sites/dev002/Shared%20Documents/ignite2021-m365-keynote.jpeg';

Verwenden Sie die Bildhilfs-API, um die Größe des Bilds zu ändern, und verwenden Sie den neuen Link, um das bild mit optimierter Größe & anzuzeigen:

const resizedImage = ImageHelper.convertToImageUrl(
  <IImageHelperRequest>{
    sourceUrl: originalImageUrl,
    width: 400
  }
);

this.domElement.innerHTML = `
  <div class="${ styles.helloWorld }">New Image</div>
  <div><img src="${ resizedImage }" /></div>
  <div>
    <div>Original image URL: <a href="${originalImageUrl}">${originalImageUrl}</a>
    <div>Resized image URL: <a href="${resizedImage}">${resizedImage}</a>
  </div>
`;

Dieses Bild mit geänderter Größe ist 30 kB groß und hat eine Auflösung von 400 x 225, eine deutliche Verbesserung der Leistung für den Benutzer. Beachten Sie, dass sich die URL des in der Größe geänderten Bildes von der ursprünglichen URL unterscheidet, die wir mit der Hilfsmethode bereitgestellt haben.

Unterstützung für private CDN

Damit die Bilder von einem privaten CDN bereitgestellt werden können, müssen die folgenden Anforderungen erfüllt sein:

• Das private CDN-Feature muss aktiviert sein.
• Die Quelldatei muss innerhalb eines Ursprungs für das CDN verfügbar sein.
• Die serverseitige Vorverarbeitung von SharePoint muss wissen, dass die Webparteigenschaft eine Bildeigenschaft ist.

Um die serverseitige Verarbeitung von SharePoint auf die Bildeigenschaft aufmerksam zu machen, listen Sie die Eigenschaften auf, in denen Bild-URLs in der manifest.json-EigenschaftimageLinkPropertyNames des Webparts gespeichert sind:

{
  "id": "374a1893-9b4d-4c10-bbe3-9411d74093e9",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",
  "supportedHosts": [ "SharePointWebPart" ],
  "imageLinkPropertyNames": [ "defaultBannerImage" ],
  "preconfiguredEntries": [{
    "title": { "default": "HelloWorld" },
    "properties: {
      "defaultBannerImage": "..."
    }
  }]
}

Dadurch kann die serverseitige Rewrite-Logik von SharePoint die Zuordnung dieser Datei zu einem privaten CDN einbeziehen, wenn die an den Client zu sendende Seite gerendert wird.