Table of contents
TOC
Réduire la table des matières
Développer la table des matières
Dernière mise à jour: 25/07/2018

Ajout d'images, de vidéos et de fichiers aux pages OneNote

S’applique à : blocs-notes consommateur sur OneDrive | Blocs-notes d’entreprise sur Office 365

Vous pouvez utiliser les éléments img, objet, et iframe pour ajouter des images, des vidéos et des fichiers à une page OneNote, lorsque vous créez ou mettez à jour la page.

  • Utilisation d'img pour afficher une image sur la page.
  • Utilisation d' iframe pour incorporer une vidéo sur la page.
  • Utilisation d'un objet pour ajouter une pièce jointe à la page.

Ajout d'images

Des images peuvent être ajoutées par référence d'URL ou en envoyant des données brutes. OneNote API prend en charge les méthodes suivantes d'ajout d'images, de logos et de photos aux pages OneNote.

Ajout d'une image publique du Web

Utilisez img avec src="http://image-url" et spécifiez l'URL d'une image accessible au public. Affiche l'image sur la page OneNote.

Ajout d'une image en utilisant des données binaires

Utilisez img avec src="name:image-block-name" et envoyez le fichier image dans une partie données d'une requête en plusieurs parties. Affiche l'image sur la page OneNote.

Ajout d'une capture de page Web

Utilisez img avec data-render-src="http://webpage-url" et spécifiez l'URL d'une page Web. Affiche une capture de toute la page Web sur la page OneNote.

Ajout d'une image affichée à partir du code HTML

Utilisez img avec data-render-src="name:html-block-name" et envoyez du code HTML dans la partie données d'une requête en plusieurs parties. Affiche le HTML sous forme d'image sur la page OneNote.

Ajout d'images du contenu du fichier PDF

Utilisezet envoyez le fichier PDF dans la partie données d'une requête en plusieurs parties. Affiche chaque page PDF en tant qu'image distincte sur la page OneNote.</p> <p id="outdent">[Ajout d'un fichier image en pièce jointe](#image-object)</p> <p id="indent">Utilisezobjectavecdata="name:file-block-name" data-attachment="file-name.file-ext" type="media-type"` et envoyez un fichier image dans la partie de données d'une requête en plusieurs parties. Ajoute une pièce jointe à la page OneNote et affiche une icône de fichier.

Pour obtenir des images sur une page OneNote, envoyez d'abord une requête GET pour le contenu de la page. Cela renvoie les URL aux ressources d'image sur la page. Ensuite, vous séparez les requêtes GET vers les ressources d'image.


Attributs d’image

Un élément img peut éventuellement inclure des attributs alt, heightet width , et les attributs de style max-width et max-height.

Types de média d'image

OneNote API prend en charge les types d'image TIFF, PNG, GIF, JPEG et BMP. Pour capturer une image qui utilise un format différent que vous ne voulez pas convertir, envoyez les données binaires dans une requête en plusieurs parties. Vous n'avez pas besoin d'utiliser Base64 ou d'encoder les données binaires que vous envoyez.

L'API détecte le type d'image d'entrée d'origine et le renvoie en tant qu'attribut data-fullres-src-type dans le code HTML de sortie. L’API renvoie également le type de l’image optimisée dans data-src-type.

Voir les limitations qui s'appliquent lors de la création de pages contenant des médias.

Ajout d'une image publique du Web

Dans le code HTML d’entrée de votre requête, incluez <img src="http://..." /> et spécifiez l'URL d'une image accessible au public pour l'attribut 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="http://..." width="300"/>
  </body>
</html>

--MyAppPartBoundary--  

Ajout d'une image en utilisant des données binaires

Dans le code HTML d’entrée de la partie Présentation de votre requête, incluez <img src="name:part-name" />part-name est l'identifiant unique de la partie données dans votre requête en plusieurs parties. Cette requête contient les données d'image binaires. Il vous suffit d’envoyer les données binaires ; n’utilisez pas de codage en Base64 ni d’autres méthodes de codage.

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

Ajout d'une capture de page Web

Vous pouvez utiliser OneNote API pour capturer des pages Web entières et les insérer dans de nouvelles pages. Cette méthode est utile pour archiver des pages Web ou capturer des pages Web complexes dotées de fonctionnalités que OneNote ne prend pas en charge (comme certains CSS).

Dans le code HTML d’entrée de votre requête, incluez <img src="http://..." /> et spécifiez l'URL de la page Web que vous souhaitez insérer pour l'attribut 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="http://www.onenote.com" width="200"/>
  </body>
</html>

--MyAppPartBoundary--  

Ajout d'une image affichée à partir du code HTML

Lorsque vous passez le code HTML en tant que bloc de données, assurez-vous qu'aucun contenu actif ne nécessite des informations d'identification de l'utilisateur ou un plug-in de navigateur préchargé. Le moteur que l'API OneNote utilise pour afficher la page HTML sous forme d'image n'a pas la capacité de laisser un utilisateur se connecter et n'inclut pas les plug-in tels qu'Adobe Flash, Apple QuickTime et bien d'autres. Cela signifie également que le contenu chargé de manière dynamique, comme celui d'un script AJAX, n'apparaîtra pas si l'obtention des données nécessite des informations d'identification de l'utilisateur ou des cookies.

Dans le code HTML d’entrée de la partie Présentation de votre demande, incluez <img data-render-src="name:part-name" />part-name est l'identifiant unique de la partie données dans votre requête en plusieurs parties qui contient le code 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="http://cdn.onenote.net/1664161560_Images/OneNote.ico" />
</body>
</html>

--MyAppPartBoundary--  

Ajout d'un fichier image en pièce jointe

Dans le code HTML d’entrée de la partie Présentation de votre requête, incluez <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />part-name est l'identifiant unique de la partie données dans votre requête en plusieurs parties. Cette requête contient les données d'image binaires. Il vous suffit d’envoyer les données binaires ; n’utilisez pas de codage en Base64 ni d’autres méthodes de codage.

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

En savoir plus sur les types de fichiers multimédia.

Ajout des vidéos

Vous pouvez intégrer des vidéos dans les pages OneNote, en utilisant <iframe data-original-src="http://..." /> le code HTML d’entrée.

Sites vidéo pris en charge

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


attributs iframe

data-original-src

Obligatoire. URL de la vidéo.
Exemple : data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"

largeur

Facultatif. La largeur de l'iframe qui contient la vidéo. La valeur par défaut est de 480.
Exemple : width="300"

hauteur

Facultatif. La hauteur de l'iframe qui contient la vidéo. La valeur par défaut est 360.
Exemple : height="300"


Exemple

Dans le code HTML d’entrée de votre requête, incluez <iframe data-original-src="http://..." /> et spécifiez l'URL de la vidéo pour l'attribut 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--

Ajout de fichiers

Vous pouvez ajouter des pièces jointes aux pages OneNote en utilisant un élément objet dans le code HTML d'entrée. Si vous ajoutez un fichier PDF, vous pouvez utiliser un élément img pour afficher les pages PDF en tant qu'images.

Ajout d'une pièce jointe

Utilisez <object .../> et envoyez le fichier dans une partie de données d'une requête en plusieurs parties. Ajoute une pièce jointe qui affiche une icône de fichier sur la page OneNote.

Ajout d'images du contenu du fichier PDF

Utilisez`et envoyez un fichier PDF dans la partie de données d'une requête en plusieurs parties. Affiche chaque page PDF en tant qu'image distincte sur la page OneNote.


Attributs de fichier

L'élément objet nécessite les attributs suivants.

data-attachment

Le nom de fichier et l'extension à afficher sur la page OneNote.
Exemple : data-attachment="filename.docx"

données

Le nom de la partie du corps dans la requête en plusieurs parties qui contient les données du fichier binaire. Ici, l'API OneNote ne prend pas en charge la transmission d'une référence d'URL.
Exemple : data="name:part-name"

type

Type de support de fichier utilisé pour déterminer l’icône de fichier à utiliser sur la page et également l’application à exécuter lorsque l’utilisateur active le fichier sur l’appareil à partir de OneNote.
Exemple : type="application/pdf"

Types de médias de fichier

L'API OneNote utilise une icône de type de fichier prédéfinie pour les pièces jointes ou une icône générique lorsque l'API ne reconnaît pas le type de fichier. La table suivante présente certains types de fichiers courants reconnus par l'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

Voir les limitations qui s'appliquent lors de la création de pages contenant des médias.

Ajout d'une pièce jointe

Dans le code HTML d'entrée de la partie Présentation de votre requête, incluez <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />, où part-name est l'identifiant unique de la partie données dans votre requête en plusieurs parties. Cette requête contient les données de fichier binaires. Il vous suffit d’envoyer les données binaires ; n’utilisez pas de codage en Base64 ni d’autres méthodes de codage.

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

Ajout d'images du contenu du fichier PDF

Dans le code HTML d'entrée de la partie Présentation de votre requête, incluez <img data-render-src="name:part-name" ... />, où part-name est l'identifiant unique de la partie données dans votre requête en plusieurs parties. Cette requête contient les données de fichier binaires. Il vous suffit d’envoyer les données binaires ; n’utilisez pas de codage en Base64 ni d’autres méthodes de codage.

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

Limitations de taille pour les demandes des pages de PUBLICATION

Lorsque vous envoyez des images et des fichiers, tenez compte des limitations suivantes :

  • La limite de taille totale de la PUBLICATION est d'environ 70 Mo, y compris les images, les fichiers et autres données. La limite réelle est affectée par le codage en aval, il n'y a donc pas de limite fixe du nombre d'octets. Les demandes qui dépassent la limite peuvent produire des résultats non fiables.

  • La limite pour chaque partie de données est de 25 Mo, y compris les en-têtes de partie. Les parties de données qui dépassent la limite sont rejetées par OneNote API.

  • Le nombre maximum d'images par page est de 150. Lorsque vous utilisez l’attribut src="http://...", l’API ignore les balises img au-delà de la limite.

  • Le nombre maximal de parties de données est de 6 par requête POST, y compris la partie Présentation requise.

  • Chaque requête peut contenir jusqu'à cinq éléments img qui utilisent data-render-src et un élément objet qui utilise data-render-src. Les références d'images et de fichiers supplémentaires sont ignorées.

  • Le nombre maximal d'images dans un seul POST est de 30, quelle que soit la méthode que vous utilisez pour les envoyer à l'API. Les images supplémentaires sont ignorées. Si vous voulez capturer une page Web qui contient beaucoup d'images, envisagez de capturer toute la page sous forme de capture.

Quand devez-vous utiliser HTML par opposition à data-render-src

Lorsque vous ne savez pas si vous devez mettre du code HTML directement sur la page OneNote ou si vous devez utiliser l’attribut data-render-src, prenez en compte les éléments suivants :

  • Le HTML complexe est probablement mieux envoyé au moteur de rendu par data-render-src, plutôt que d'essayer de modifier le code HTML pour qu'il corresponde à ce que OneNote API peut accepter. Cela est également vrai lorsque votre code HTML inclut des balises qui ne sont pas prises en charge.

  • ll vaut probablement mieux procéder au rendu de page précis, qui permet de préserver la disposition et l’apparence de la page avec le moteur de rendu via data-render-src.

  • Pour modifier le texte modifiable directement, il vaut souvent mieux insérer le code HTML directement sur la page. Les images obtenues sont scannées par un système de reconnaissance optique de caractères (OCR), mais le résultat n’est pas le même.

  • La capture instantanée dans le temps à des fins d’historique ou d’archivage fonctionne généralement mieux avec la méthode data-render-src.

  • Le marquage d’une création de page web à des fins de révision correspond à un processus dans lequel l’attribut data-render-src est réellement mis en valeur. À l’aide des fonctionnalités manuscrites de OneNote, vous pouvez dessiner sur l’image pour indiquer des modifications ou attirer l’attention sur des zones importantes. Le fait de disposer de la page web sous forme d’image facilite grandement ce processus.

  • Les très grandes images ou les images dans des formats qui ne sont pas directement acceptés par OneNote peuvent parfois être transformées en miniatures et converties avec la méthode data-render-src plus facilement que si vous le faisiez dans votre propre code. Même si l’image est disponible en ligne également, l’incorporation des données à votre POST peut parfois mettre la page capturée à disposition de l’utilisateur OneNote plus rapidement, en réduisant le nombre total de boucles nécessaires pour créer la page OneNote.

Parfois, la meilleure façon de déterminer quelle méthode fonctionnera le mieux pour vos utilisateurs est de l'essayer dans les deux sens au fur et à mesure que vous développez votre application.

Autorisations

Pour créer ou mettre à jour des pages OneNote, vous devez demander les autorisations appropriées. Choisissez le niveau d’autorisations le plus bas dont votre application a besoin pour faire son travail.

Autorisations pour les pages de PUBLICATION

PlateformeÉtendue d’autorisation
Grand publicoffice.onenote_create, office.onenote_update_by_app, office.onenote_update
EntrepriseNotes.Create, Notes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Autorisations pour les pages PATCH

PlateformeÉtendue d’autorisation
Grand publicoffice.onenote_update_by_app, office.onenote_update
EntrepriseNotes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

Pour en savoir plus sur les étendues d’autorisation et leur fonctionnement, consultez la section relative aux étendues d’autorisation dans OneNote.

Ressources supplémentaires

© 2018 Microsoft