Agregar imágenes, vídeos y archivos a páginas de OneNote

  • Artículo

Se aplica a: Blocs de notas para consumidores de OneDrive | Blocs de notas empresariales de Microsoft 365

Puede usar elementos img, object y iframe para agregar imágenes, vídeos y archivos a una página de OneNote cuando cree o actualice la página.

  • Use img para representar una imagen en la página.
  • Use iframe para insertar un vídeo en la página.
  • Use object para agregar un archivo adjunto a la página.

Agregar imágenes

Las imágenes pueden agregarse mediante una dirección URL de referencia o enviando datos sin procesar. Microsoft Graph admite los siguientes métodos para agregar imágenes, logotipos y fotos a páginas de OneNote.

Agregar una imagen pública desde la web

Use img con src="https://image-url" y especifique la dirección URL de una imagen de acceso público. Representa la imagen en la página de OneNote.

Agregar una imagen con datos binarios

Use img con src="name:image-block-name" y envíe el archivo de imagen en una parte de datos de una solicitud de varias partes. Representa la imagen en la página de OneNote.

Agregar una instantánea de página web

Use img con data-render-src="https://webpage-url" y especifique la dirección URL de una página web. Representa una instantánea de la página web completa en la página de OneNote.

Agregar una imagen representada desde HTML

Use img con data-render-src="name:html-block-name" y envíe el HTML en la parte de datos de una solicitud de varias partes. Representa el HTML como una imagen en la página de OneNote.

Agregar imágenes de contenidos de archivo PDF

Use <img data-render-src="name:part-name" /> y envíe el archivo PDF en la parte de datos de una solicitud de varias partes. Representa cada página PDF como una imagen independiente en la página de OneNote.

Agregar un archivo de imagen como un archivo adjunto

Use object con data="name:file-block-name" data-attachment="file-name.file-ext" type="media-type" y envíe un archivo de imagen en la parte de datos de una solicitud de varias partes. Agrega un archivo adjunto a la página de OneNote y muestra un icono de archivo.

Nota:

Nota: Para obtener las imágenes en una página de OneNote, primero envíe una solicitud GET para el contenido de la página. Esto devuelve las direcciones URL a los recursos de la imagen en la página. Después separe las solicitudes GET a los recursos de imagen.

Atributos de imagen

Un elemento img puede, opcionalmente, incluir los atributos alt, height y width, y los atributos de estilo max-width y max-height.

Tipos de elementos multimedia de imagen

Microsoft Graph es compatible con los tipos de imagen BMP, PNG, GIF, JPEG y TIFF. Para capturar una imagen que usa un formato diferente que no quiere convertir, envíe los datos binarios en una solicitud de varias partes. No es necesario usar Base64 ni codificar los datos binarios con otros formatos.

Nota:

Nota: La API de OneNote detecta automáticamente el tipo de imagen de entrada original y lo devuelve como el atributo data-fullres-src-type en el HTML de salida. La API también devuelve el tipo de imagen de la imagen optimizada en data-src-type.

Consulte las limitaciones que se aplican al crear páginas que contienen archivos multimedia.

Agregar una imagen pública desde la web

En el HTML de entrada de su solicitud, incluya <img src="https://..." /> y especifique la dirección URL de una imagen de acceso público para el atributo src.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Public URL</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays an image from the web.</p>
    <img src="https://..." width="300"/>
  </body>
</html>

--MyAppPartBoundary--

Agregar una imagen con datos binarios

En el HTML de entrada de la parte Presentation de su solicitud, incluya <img src="name:part-name" />, donde part-name es el identificador único para el elemento de datos en su solicitud de varias partes que contiene los datos de imagen binarios. Solo tiene que enviar los datos binarios, no use Base64 ni los codifique con otros formatos.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Image binary data</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays the uploaded image.</p>
    <img src="name:image-block-name" alt="a cool image" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="MyAppPictureId"
Content-Type: image/jpeg

... image binary data ...

--MyAppPartBoundary--

Agregar una instantánea de página web

Puede usar Microsoft Graph para tomar instantáneas de páginas web completas e insertarlas en otras páginas. Este método es útil para archivar páginas web o capturar páginas web complejas con características que no son compatibles con OneNote (por ejemplo, algunas CSS).

En el HTML de entrada de su solicitud, incluya <img src="https://..." /> y especifique la dirección URL de la página que desea insertar para el atributo src.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Webpage capture</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays an image of the webpage.</p>
    <img data-render-src="https://www.onenote.com" width="200"/>
  </body>
</html>

--MyAppPartBoundary--

Agregar una imagen representada desde HTML

Al pasar el código HTML como un bloque de datos, asegúrese de que no hay ningún contenido activo que requiera credenciales de usuario o un complemento del explorador cargado previamente. El motor que Microsoft Graph usa para representar la página HTML en una imagen no tiene la capacidad de hacer que un usuario inicie sesión y no incluye los complementos, como Adobe Flash, Apple QuickTime y así sucesivamente. Eso también implica que el contenido que se carga dinámicamente, como el que puede incluir un script de AJAX, no aparecerá si para obtener los datos se requieren credenciales de inicio de sesión de usuario o cookies.

En el HTML de entrada de la parte Presentation de su solicitud, incluya <img data-render-src="name:part-name" />, donde part-name es el identificador único para el elemento de datos en su solicitud de varias partes que contiene el HTML.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: HTML block</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page displays the block of HTML as an image.</p>
    <img data-render-src="name:html-block-name" alt="a cool image" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="html-block-name"
Content-Type: text/html

<html>
<body>
<h1>This HTML will render as an image</h1>
<p><b>Don't</b> try to embed another <i>data-render-src</i> type-image inside the HTML part--
it won't work. Instead, use URL-based real images like this:</p>
<img src="https://cdn.onenote.net/1664161560_Images/OneNote.ico" />
</body>
</html>

--MyAppPartBoundary--

Agregar un archivo de imagen como datos adjuntos

En el HTML de entrada de la parte Presentation de su solicitud, incluya <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />, donde part-name es el identificador único para el elemento de datos en su solicitud de varias partes que contiene los datos de imagen binarios. Solo tiene que enviar los datos binarios, no use Base64 ni los codifique con otros formatos.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image: Binary image data as file attachment</title>
    <meta name="created" value="2015-11-11T12:45:00.000-8:00"/>
  </head>
  <body>
    <p>This page contains the image as a file attachment.</p>
    <object data-attachment="image-file.jpg" data="name:image-block-name" type="image/jpeg" />
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg

... binary file data ...

--MyAppPartBoundary--

Obtenga más información sobre tipos de archivos multimedia.

Agregar vídeos

Puede insertar vídeos en páginas de OneNote con <iframe data-original-src="https://..." /> en el HTML de entrada.

Sitios de vídeo admitidos

  • Dailymotion
  • Office Mix
  • Sway
  • Sketchfab
  • TED
  • YouTube
  • Vimeo
  • Vine

Atributos iframe

data-original-src

Obligatorio. La dirección URL del vídeo.

Ejemplo: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"

width

Opcional. La anchura del iframe que contiene el vídeo. El valor predeterminado es 480.

Ejemplo: width="300"

height

Opcional. La altura del iframe que contiene el vídeo. El valor predeterminado es 360.

Ejemplo: height="300"

Ejemplo

En el HTML de entrada de su solicitud, incluya <iframe data-original-src="https://..." /> y especifique la dirección URL del vídeo para el atributo data-original-src.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
    <head>
        <title>A page with an embedded video</title>
    </head>
    <body>
        <iframe data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" width="340" height="280"/>
    </body>
</html>

--MyAppPartBoundary--

Agregar archivos

Puede agregar archivos adjuntos a las páginas de OneNote con un elemento object en el HTML de entrada. Si va a agregar un archivo PDF, puede usar un elemento img para representar las páginas del PDF como imágenes.

Agregar un archivo adjunto

Use <object .../> y envíe el archivo en una parte de datos de una solicitud de varias partes. Agrega un archivo adjunto que muestra un icono de archivo en la página de OneNote.

Agregar imágenes de contenidos de archivo PDF

Use <img data-render-src="name:part-name" /> y envíe un archivo PDF en la parte de datos de una solicitud de varias partes. Representa cada página PDF como una imagen independiente en la página de OneNote.

Atributos de archivo

El elemento object requiere los siguientes atributos.

data-attachment

El nombre de archivo y la extensión para mostrar en la página de OneNote.

Ejemplo: data-attachment="filename.docx"

data

El nombre de la parte del cuerpo de la solicitud de varias partes que contiene los datos de archivo binario. Microsoft Graph non admite pasar una referencia de la dirección URL aquí.

Ejemplo: data="name:part-name"

type

El tipo de archivos multimedia, se usa para determinar el icono de archivo que se usará en la página y qué aplicación se inicia cuando el usuario activa el archivo en el dispositivo desde OneNote.

Ejemplo: type="application/pdf"

Tipos de archivos multimedia

Microsoft Graph usa iconos de tipos de archivos multimedia predefinidos para los archivos adjuntos, o un icono genérico cuando la API no reconoce el tipo de archivo. La siguiente tabla muestra algunos tipos de archivo comunes que reconocen la API.

  • application/pdf
  • application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • application/vnd.openxmlformats-officedocument.presentationml.presentation
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  • image/png
  • image/jpeg
  • image/gif
  • audio/wav
  • video/mp4
  • application/msword
  • application/mspowerpoint
  • application/excel

Consulte las limitaciones que se aplican al crear páginas que contienen archivos multimedia.

Agregar un archivo adjunto

En el HTML de entrada de la parte Presentation de su solicitud, incluya <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />, donde part-name es el identificador único para el elemento de datos en su solicitud de varias partes que contiene los datos de archivo binario. Solo tiene que enviar los datos binarios, no use Base64 ni los codifique con otros formatos.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with an image file attachment</title>
  </head>
  <body>
    <p>This is an image file attachment.</p>
    <object data-attachment="Logo.jpg" data="name:logo1-file" type="image/jpeg" />
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="logo1-file"
Content-Type: image/jpeg

... binary file data ...

--MyAppPartBoundary--

Agregar imágenes de contenidos de archivo PDF

En el HTML de entrada de la parte Presentation de su solicitud, incluya <img data-render-src="name:part-name" ... />, donde part-name es el identificador único para el elemento de datos en su solicitud de varias partes que contiene los datos de archivo binario. Solo tiene que enviar los datos binarios, no use Base64 ni los codifique con otros formatos.

Content-Type: multipart/form-data; boundary=MyAppPartBoundary
Authorization: Bearer {access-token}

--MyAppPartBoundary
Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <title>A page with images of the pages of a PDF file</title>
  </head>
  <body>
    <p>The pages of this PDF file render as images.</p>
    <img data-render-src="name:file-part" alt="PDF file as images" width="500"/>
  </body>
</html>

--MyAppPartBoundary
Content-Disposition: form-data; name="file-part"
Content-Type: application/pdf

... binary file data ...

--MyAppPartBoundary--

Limitaciones de tamaño para las solicitudes de páginas POST

Al enviar datos de imagen y de archivo, tenga en cuenta estas limitaciones:

  • La API de REST de Microsoft Graph tiene un límite de solicitudes de 4 MB. Si se supera se producirá un error con el mensaje "solicitud demasiado grande (413)".

  • El límite de solicitudes de la API de REST subyacente de OneNote es más alto, pero que no se puede acceder mediante la API de Microsoft Graph.

    • El límite de tamaño total de POST es ~ 70 MB, incluyendo imágenes, archivos y otros datos. El límite se ve afectado por la codificación de bajada, por lo que no hay ningún límite fijo del número de bytes. Las solicitudes que superan el límite pueden producir resultados no confiables.
    • El límite de cada parte de datos es 25 MB, incluyendo los encabezados de la parte. Microsoft Graph rechaza las partes de datos que superan el límite.

  • El número máximo de imágenes por página es 150. Al usar el atributo src="https://...", la API omite las etiquetas img pasado este límite.

  • El número máximo de partes de datos es 6 por POST, incluida la parte Presentation necesaria.

  • Cada solicitud puede contener hasta cinco elementos img que usan data-render-src y un elemento de objeto que usa data-render-src. Se omiten las referencias de imagen y archivo adicionales.

  • El número máximo de imágenes en un solo POST es 30, independientemente del método que utilice para enviarlas a la API. Las imágenes adicionales se ignoran. Si desea capturar una página web que contiene una gran cantidad de imágenes, considere la posibilidad de capturar toda la página como una instantánea.

Cuándo usar HTML o data-render-src

A la hora de decidir entre colocar el código HTML directamente en la página de OneNote o usar el atributo data-render-src, tenga en cuenta lo siguiente:

  • El código HTML complejo probablemente se envía mejor al motor de representación mediante data-render-src, en lugar de intentar modificar el HTML para que se ajuste a lo que Microsoft Graph puede aceptar. Esto también es así cuando el código HTML incluye etiquetas que aún no se admiten.

  • Para la representación precisa de la página, para conservar su diseño y aspecto, probablemente es mejor usar el motor de representación mediante data-render-src.

  • Para el texto directamente editable suele ser mejor insertar el código HTML directamente en la página. Las imágenes representadas se escanean mediante un sistema de Reconocimiento óptico de caracteres (OCR), pero no es lo mismo.

  • Para las instantáneas puntuales para el historial o el archivo suele ser mejor el método data-render-src.

  • En el marcado del diseño de una página web para revisiones es donde data-render-src realmente destaca. Usando las funciones de entrada manuscrita de OneNote puede dibujar en la imagen para indicar los cambios o destacar áreas importantes. Tener la página web como una imagen facilita mucho esta tarea.

  • Las imágenes muy grandes o las imágenes con formatos que OneNote no acepta directamente a veces pueden reducirse a miniaturas y convertirse con el atributo data-render-src más fácilmente que haciéndolo con su propio código. Incluso si la imagen está disponible en línea, incrustar los datos en su POST a veces puede hacer que la página capturada esté disponible antes para usuarios de OneNote, ya que reduce el número total de ciclos de ida y vuelta necesarios para crear la página de OneNote.

A veces, la mejor forma de determinar qué método funcionará mejor para los usuarios es probar ambas formas al elaborar la aplicación.

Permisos

Para crear o actualizar páginas OneNote, debe solicitar los permisos adecuados. Elija el nivel más bajo que necesita la aplicación para hacer su trabajo.

Permisos para páginas POST

  • Notes.Create
  • Notes.ReadWrite
  • Notes.ReadWrite.All

Permisos para páginas PATCH

  • Notes.ReadWrite
  • Notes.ReadWrite.All

Para obtener más información sobre los ámbitos de permiso y cómo funcionan, consulte los ámbitos de permisos de OneNote.

Contenido relacionado