Ajout d’images, de vidéos et de fichiers aux pages OneNote
S’applique à blocs-notes consommateur sur OneDrive | Blocs-notes d’entreprise sur Microsoft Office 365
Vous pouvez les éléments utiliser img, object et iframe pour ajouter des images, des vidéos et des fichiers à une page OneNote lorsque vous créez ou mettez à jour la page.
- Utilisez img pour afficher une image sur la page.
- Utilisez iframe pour incorporer une vidéo sur la page.
- Utilisez object pour ajouter un fichier en pièce jointe à la page.
Ajout d’images
Vous pouvez ajouter des images par référence URL ou en envoyant des données brutes. Microsoft Graph prend en charge les méthodes suivantes d’ajout d’images, de logos et de photos à des pages OneNote.
Ajouter une image publique à partir du web
Utilisez img avec src="https://image-url" et spécifiez l’URL d’une image accessible publiquement. Affiche l’image sur la page OneNote.
Ajouter une image à l’aide de données binaires
Utilisez img avec src="name:image-block-name" et envoyez le fichier image dans un composant de données d’une demande en plusieurs parties. Affiche l’image sur la page OneNote.
Ajouter un instantané de page web
Utilisez img avec data-render-src="https://webpage-url" et spécifiez l’URL d’une page web. Affiche un instantané de la page web entière sur la page OneNote.
Ajouter une image affichée depuis HTML
Utilisez img avec data-render-src="name:html-block-name" et envoyez le HTML dans un composant de données d’une demande en plusieurs parties. Affiche le HTML sous forme d’une image sur la page OneNote.
Ajouter des images du contenu du fichier PDF
Utilisez <img data-render-src="name:part-name" /> et envoyez le fichier PDF dans le composant de données d’une demande en plusieurs parties. Affiche chaque page PDF sous la forme d’une image distincte sur la page OneNote.
Ajouter un fichier image en tant que fichier en pièce jointe
Utilisez object avec data="name:file-block-name" data-attachment="file-name.file-ext" type="media-type" et envoyez un fichier image dans le composant de données d’une demande en plusieurs parties. Ajoute un fichier en pièce jointe à la page OneNote et affiche une icône de fichier.
Remarque
Pour obtenir des images sur une page OneNote, commencez par envoyer une demande GET pour le contenu de la page. Cela renvoie les URL pour les ressources de l’image sur la page. Vous séparez ensuite les requêtes GET aux ressources de l’image.
Attributs d’image
Un élément img peut éventuellement inclure les attributs alt, height et width, ainsi que les attributs de style max-width et max-height.
Types de support d’image
Microsoft Graph prend en charge les types d’images TIFF, PNG, GIF, JPEG et BMP. Pour capturer une image qui utilise un autre format que vous ne souhaitez pas convertir, envoyez les données binaires dans une demande en plusieurs parties. Vous n’avez pas besoin d’utiliser le codage en Base64 ni de coder les données binaires que vous envoyez.
Remarque
L’API détecte le type d’image d’entrée d’origine et le retourne 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.
Consultez les limitations qui s’appliquent lors de la création de pages qui contiennent des éléments multimédias.
Ajouter une image publique à partir du web
Dans le code d’entrée HTML de votre requête, incluez <img src="https://..." /> et spécifiez l’URL d’une image accessible publiquement 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="https://..." width="300"/>
</body>
</html>
--MyAppPartBoundary--
Ajouter une image à l’aide de données binaires
Dans le code d’entrée HTML du composant Presentation de votre requête, incluez <img src="name:part-name" />, où part-name est l’identificateur unique pour le composant de données dans votre demande en plusieurs partiesqui 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--
Ajouter un instantané de page web
Vous pouvez utiliser Microsoft Graph pour créer des instantanés de pages Web entières et les insérer dans de nouvelles pages. Cette méthode est utile pour archiver des pages web ou pour capturer des pages Web complexes avec des fonctionnalités que OneNote ne prend pas en charge (comme certains CSS, par exemple).
Dans le code d’entrée HTML de votre requête, incluez <img src="https://..." /> et spécifiez l’URL de la page web à 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="https://www.onenote.com" width="200"/>
</body>
</html>
--MyAppPartBoundary--
Ajouter une image affichée depuis HTML
Lorsque vous transmettez le code HTML en tant que bloc de données, assurez-vous qu’il n’y a pas de contenu actif qui exigerait les informations d’identification de l’utilisateur ou un plug-in de navigateur préchargé. Le moteur utilisé par Microsoft Graph pour afficher la page HTML dans une image ne permet pas à un utilisateur de se connecter et ne contient pas de plug-ins tels qu’Adobe Flash, Apple QuickTime, etc. Cela signifie également que le contenu chargé dynamiquement, comme celui pouvant être généré avec un script AJAX, n’apparaîtra pas si des informations d’identification de connexion ou des cookies sont nécessaires pour obtenir les données.
Dans le code d’entrée HTML du composant Presentation de votre requête, incluez <img data-render-src="name:part-name" />, où part-name est l’identificateur unique pour le composant de données dans votre demande en plusieurs partiesqui contient le 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--
Ajouter un fichier image en tant que fichier en pièce jointe
Dans le code d’entrée HTML du composant Presentation 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’identificateur unique pour le composant de données dans votre demande en plusieurs partiesqui 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 support de fichiers
Ajout de vidéos
Vous pouvez incorporer des vidéos dans des pages OneNote en utilisant <iframe data-original-src="https://..." /> dans le code d’entrée HTML.
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"
width
Facultatif. Largeur de l’iframe contenant la vidéo. La valeur par défaut est 480.
Exemple : width="300"
height
Facultatif. Hauteur de l’iframe contenant la vidéo. La valeur par défaut est 360.
Exemple : height="300"
Exemple
Dans le code d’entrée HTML de votre requête, incluez <iframe data-original-src="https://..." /> 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 fichiers en pièce jointe à des pages OneNote à l’aide un élément object dans le code d’entrée HTML. Si vous ajoutez un fichier PDF, vous pouvez utiliser un élément img pour afficher les pages PDF en tant qu’images.
Ajouter un fichier en pièce jointe
Utilisez <object .../> et envoyez le fichier dans un composant de données d’une demande en plusieurs parties. Ajoute un fichier en pièce jointe à la page OneNote et affiche une icône de fichier.
Ajouter des images du contenu du fichier PDF
Utilisez <img data-render-src="name:part-name" /> et envoyez un fichier PDF dans le composant de données d’une demande en plusieurs parties. Affiche chaque page PDF sous la forme d’une image distincte sur la page OneNote.
Attributs de fichiers
L’élément object requiert les attributs suivants.
data-attachment
Le nom de fichier et l’extension à afficher sur la page OneNote.
Exemple : data-attachment="filename.docx"
data
Le nom du composant du corps dans la demande en plusieurs parties qui contient les données de fichier binaires. Microsoft Graph ne prend pas en charge la transmission d’une référence URL ici.
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 support de fichier
Microsoft Graph utilise une icône de type fichier prédéfinie pour les fichiers joints ou une icône générique lorsque l’API ne reconnaît pas le type de fichier. Le tableau suivant répertorie des types de fichiers courants qui sont 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
Consultez les limitations qui s’appliquent lors de la création de pages qui contiennent des éléments multimédias.
Ajouter un fichier en pièce jointe
Dans le code d’entrée HTML du composant Presentation 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’identificateur unique pour le composant de données dans votre demande en plusieurs partiesqui 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--
Ajouter des images du contenu du fichier PDF
Dans le code d’entrée HTML du composant Presentation de votre requête, incluez <img data-render-src="name:part-name" ... />, où part-name est l’identificateur unique pour le composant de données dans votre demande en plusieurs partiesqui 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 requêtes de pages POST
Lorsque vous envoyez des données de fichier et d’image, gardez à l’esprit les limitations suivantes :
L’API Microsoft Graph REST a une limite de demande 4 Mo. Tout élément supérieur à ceci échouera avec le message d’erreur « demander trop volumineux (413) ».
La limite de demande de l’API REST OneNote sous-jacente est une version ultérieure, mais vous ne pouvez pas y accéder via l’API Graph de Microsoft.
- La limite de taille POST billet totale est ~ 70 Mo, y compris les données d’image, de fichier et les autres données. La limite réelle est affectée par le codage en aval, donc il n’y a aucune limite du nombre d’octets fixe. Les requêtes qui dépassent la limite peuvent produire des résultats peu fiables.
- La limite pour chaque composant de données est de 25 Mo, y compris les en-têtes de composant. Les composants de données qui dépassent la limite sont rejetés par Microsoft Graph.
Le nombre maximal d’images par page est de 150. Lorsque vous utilisez l’attribut
src="https://...", l’API ignore les balises img au-delà de la limite.Le nombre maximal de composants de données est de 6 par POST, y compris le composant Presentation requis.
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 de fichier et d’image supplémentaires sont ignorées.
Le nombre maximal d’images dans un seul POST est de 30, quelle que soit la méthode utilisée pour les envoyer à l’API. Les images supplémentaires sont ignorées. Si vous souhaitez capturer une page web qui contient un grand nombre d’images, vous pouvez capturer la page entière en tant qu’instantané.
Quand utiliser HTML plutôt que 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 :
Il est probablement plus approprié d’envoyer du code HTML complexe au moteur de rendu via data-render-src, plutôt que d’essayer de modifier le code HTML pour qu’il corresponde aux éléments acceptés par Microsoft Graph. 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, le meilleur moyen de déterminer la méthode qui fonctionnera le mieux pour vos utilisateurs consiste à essayer les deux méthodes lorsque vous développez votre application.
Autorisations
Pour créer ou mettre à jour des pages OneNote, demandez les autorisations appropriées. Choisissez le niveau le plus faible requis par votre application pour faire son travail.
Autorisations pour les pages POST
- Notes.Create
- Notes.ReadWrite
- Notes.ReadWrite.All
Autorisations pour les pages PATCH
- 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.
Contenu connexe
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour