API del Asistente para imágenes

La clase estática ImageHelper (en @microsoft/sp-image-helper) se ha agregado para permitir a los desarrolladores de SPFx acceso en tiempo de ejecución a:

• Direcciones URL de imágenes en miniatura generadas automáticamente de páginas y documentos almacenados en SharePoint
• Direcciones URL más optimizadas para imágenes almacenadas en SharePoint

El método auxiliar ImageHelper.convertToImageUrl() toma una dirección URL a un recurso en SharePoint, un ancho y un alto opcional y realizará operaciones del lado cliente para intentar crear una dirección URL optimizada.

La dirección URL resultante apuntará a una imagen cercana al tamaño solicitado. La dirección URL resultante también incluirá el uso de otros servicios multimedia y gráficos de SharePoint. Si está disponible para el recurso solicitado, las ubicaciones de CDN públicas o privadas sirven las imágenes y miniaturas cuyo tamaño ha cambiado.

Nota:

La API del Asistente para imágenes se introdujo en la versión 1.14 de SharePoint Framework como una característica en versión preliminar para desarrolladores.

Ventajas de usar esta API

• La imagen se puede entregar más rápido porque potencialmente se sirve fuera de una memoria caché.
• El tamaño de la imagen se ajustará correctamente, ya que el ancho es obligatorio y el alto es opcional. Esto permite a los clientes almacenar imágenes de alta resolución en SharePoint, pero no pagar la penalización de tiempo de descarga cuando se usan esas imágenes.
• La dirección URL de origen puede ser cualquier tipo de archivo dentro de SharePoint donde se pueda generar una miniatura. A continuación, se devolvería una dirección URL de miniatura de imagen.

Explicación: ImageHelper.convertToImageUrl()

El método estático convertToImageUrl() acepta un único argumento de tipo IImageHelperRequest. Este objeto tiene dos propiedades necesarias, sourceUrl&width y una propiedad opcional height.

El procesamiento de imágenes del lado servidor de SharePoint tiene una lista de anchos de punto de interrupción de resolución que admite, incluidos: 200, 400, 960, 1600, & 2560.

Aunque puede especificar cualquier ancho para cambiar el tamaño de la imagen, SharePoint elegirá el punto de interrupción de resolución más grande más cercano. Por ejemplo, si especifica width: 250, el ancho de la imagen cuyo tamaño haya cambiado será de 400 px.

Si especifica la propiedad opcional height, no se ajustará el ancho al punto de interrupción más cercano. Pero si se omite la height propiedad, SharePoint determina automáticamente el alto de la imagen con el punto de interrupción de ancho de alto & y, al mismo tiempo, mantiene la relación de aspecto de la imagen.

Sugerencia

Omitir la propiedad height proporciona la respuesta más rápida de SharePoint

Uso de la API del Asistente para imágenes

Para usar la API del Asistente para imágenes, primero debe instalarla en el proyecto:

npm install @microsoft/sp-image-helper

Después, impórtela en el proyecto donde planea usar la API:

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

A continuación, use la API para obtener una imagen en miniatura de un archivo existente en SharePoint. En este caso, hemos cargado un archivo desde el sitio Galería de imágenes de Microsoft News. En este ejemplo, usamos un archivo de 1,2 MB con una resolución de 1920 x 1080, el cual no es un formato web ideal:

El archivo existe en la biblioteca predeterminada Documentos del sitio:

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

Use la API asistente de imágenes para cambiar el tamaño de la imagen y usar el nuevo vínculo para mostrar la imagen optimizada con cambio de tamaño & :

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>
`;

Esta imagen cuyo tamaño se ha cambiado es de solo 30 Kb con una resolución de 400 x 225, lo que supone una mejora significativa en el rendimiento del usuario. Observe que la dirección URL de la imagen cuyo tamaño ha cambiado difiere de la dirección URL original que se proporcionó al método auxiliar.

Compatibilidad con CDN privada

Para que las imágenes estén disponibles para ser atendidas desde una red CDN privada, deben cumplirse los siguientes requisitos:

• La característica CDN privada debe estar habilitada.
• El archivo de origen debe estar disponible dentro de un origen para CDN.
• El preprocesamiento del lado del servidor de SharePoint debe saber que la propiedad del elemento web es una propiedad de imagen

Para que el procesamiento del lado servidor de SharePoint tenga en cuenta la propiedad de imagen, enumere las propiedades donde se almacenan las direcciones URL de imagen en la propiedad manifest.jsonimageLinkPropertyNames del elemento web:

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

Esto permite que la lógica de reescritura del lado servidor de SharePoint incluya la asignación de ese archivo a una red CDN privada al representar la página que se enviará al cliente.