Adicionar imagens, vídeos e arquivos a páginas do OneNote
Aplica-se a Notebooks de consumidores no OneDrive | Notebooks corporativos no Microsoft 365
Você pode usar os elementos img, object e iframe para adicionar imagens, vídeos e arquivos à página do OneNote quando você criar ou atualizar a página.
- Use img para renderizar uma imagem na página.
- Use iframe para inserir um vídeo na página.
- Use object para adicionar um anexo de arquivo na página.
Adicionar imagens
Imagens podem ser adicionadas por referência de URL ou enviando dados brutos. Os seguintes métodos de adição de imagens, logotipos e fotos para páginas do OneNote são compatíveis com o Microsoft Graph.
Adicionar uma imagem pública da Web
Use img com src="https://image-url" e especifique a URL de uma imagem acessível ao público. Renderiza a imagem na página do OneNote.
Adicionar uma imagem usando dados binários
Use img com src="name:image-block-name" e envie o arquivo de imagem em uma parte de dados de uma solicitação de várias partes. Renderiza a imagem na página do OneNote.
Adicionar um instantâneo de página da Web
Use img com data-render-src="https://webpage-url" e especifique a URL de uma página da Web. Renderiza um instantâneo da página da Web inteira na página do OneNote.
Adicionar uma imagem renderizada de HTML
Use img com data-render-src="name:html-block-name" e envie HTML na parte de dados de uma solicitação de várias partes. Renderiza o HTML como uma imagem na página do OneNote.
Adicionar imagens de conteúdos de arquivo PDF
Use <img data-render-src="name:part-name" /> e envie o arquivo PDF na parte de dados de uma solicitação de várias partes. Renderiza cada página do PDF como uma imagem separada na página do OneNote.
Adicionar um arquivo de imagem como um anexo de arquivo
Use object com data="name:file-block-name" data-attachment="file-name.file-ext" type="media-type" e envie um arquivo de imagem em uma parte de dados de uma solicitação de várias partes. Adiciona um anexo de arquivo à página do OneNote e exibe um ícone de arquivo.
Observação
Para inserir imagens em uma página do OneNote, primeiro envie uma solicitação GET para o conteúdo da página. Isso retornará as URLs para recursos de imagem na página. Em seguida, separe as solicitações GET dos recursos de imagem.
Atributos de imagem
Um elemento img pode incluir opcionalmente atributos alt, height e width e os atributos de estilo max-width e max-height.
Tipos de mídia de imagem
O Microsoft Graph é compatível com os tipos de imagem TIFF, PNG, GIF, JPEG e BMP. Para capturar uma imagem que usa um formato diferente que você não quer converter, envie dados binários em uma solicitação de várias partes. Não é necessário usar Base64 ou codificar os dados binários que você enviar.
Observação
A API detecta o tipo de imagem de entrada e o retorna como o atributo data-fullres-src-type no HTML de saída. A API também retorna o tipo de imagem da imagem otimizada em data-src-type.
Ver limitações que se aplicam ao criar páginas que contém mídia.
Adicionar uma imagem pública da Web
No HTML de entrada da sua solicitação, inclua <img src="https://..." /> e especifique a URL de uma imagem publicamente acessível para o 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--
Adicionar uma imagem usando dados binários
No HTML de entrada da parte de Apresentação da sua solicitação, inclua <img src="name:part-name" />, em que part-name é o identificador exclusivo para a parte de dados na sua solicitação de várias partes que contém os dados de imagem binária. Basta enviar dados binários, não use Base64 ou codifique.
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--
Adicionar um instantâneo de página da Web
Você pode usar o Microsoft Graph para fazer instantâneos inteiros de páginas da Web e inseri-los em novas páginas. Esse método é útil para arquivar páginas da Web ou capturar páginas da Web complexas que possuem recursos não compatíveis com o OneNote (como algumas CSS).
No HTML de entrada da sua solicitação, inclua <img src="https://..." /> e especifique a URL de uma página da Web que você quer inserir para o 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--
Adicionar uma imagem renderizada de HTML
Quando você passar o HTML como um bloco de dados, certifique-se de que não haja conteúdo ativo que exija credenciais de usuário ou um plug-in de navegador pré-carregado. O mecanismo que o Microsoft Graph usa para renderizar a página HTML em uma imagem não tem a capacidade de fazer logon de um usuário e não inclui plug-ins como Adobe Flash, Apple QuickTime entre outros. Isso também significa que o conteúdo carregado dinamicamente, que pode vir com um script AJAX, não será exibido se a obtenção dos dados exigir credenciais de logon do usuário ou cookies.
No HTML de entrada da parte de Apresentação da sua solicitação, inclua <img data-render-src="name:part-name" />, em que part-name é o identificador exclusivo para a parte de dados na sua solicitação de várias partes que contém o 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--
Adicionar um arquivo de imagem como um anexo
No HTML de entrada da parte de Apresentação da sua solicitação, inclua <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />, em que part-name é o identificador exclusivo para a parte de dados na sua solicitação de várias partes que contém os dados de imagem binária. Basta enviar dados binários, não use Base64 ou codifique.
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--
Saiba mais sobre tipos de mídia de arquivos.
Adicionar vídeos
Você pode inserir vídeos em páginas do OneNote usando <iframe data-original-src="https://..." /> no HTML de entrada.
Sites de vídeo compatíveis
- Dailymotion
- Office Mix
- Sway
- Sketchfab
- TED
- YouTube
- Vimeo
- Vine
atributos de iframe
data-original-src
Obrigatório. A URL do vídeo.
Exemplo: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
width
Opcional. A largura do iframe que contém o vídeo. O padrão é 480.
Exemplo: width="300"
height
Opcional. A altura do iframe que contém o vídeo. O padrão é 360.
Exemplo: height="300"
Exemplo
No HTML de entrada da sua solicitação, inclua <iframe data-original-src="https://..." /> e especifique a URL do vídeo para o 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--
Adicionar arquivos
Você pode adicionar anexos de arquivo a páginas do OneNote usando um elemento object de HTML de entrada. Se você estiver adicionando um arquivo PDF, você pode usar um elemento de img para renderizar as páginas de PDF como imagens.
Use <object .../> e envie o arquivo na parte de dados de uma solicitação de várias partes. Adiciona um anexo de arquivo que exibe um ícone de arquivo na página do OneNote.
Adicionar imagens de conteúdos de arquivo PDF
Use <img data-render-src="name:part-name" /> e envie um arquivo PDF na parte de dados de uma solicitação de várias partes. Renderiza cada página do PDF como uma imagem separada na página do OneNote.
Atributos de arquivo
O elemento object requer os seguintes atributos.
data-attachment
O nome e a extensão do arquivo para exibir na página do OneNote.
Exemplo: data-attachment="filename.docx"
data
O nome da parte do corpo na solicitação de várias partes que contém os dados de arquivo binário. O Microsoft Graph não é compatível com a passagem de uma referência de URL aqui.
Exemplo: data="name:part-name"
type
O tipo de mídia de arquivo, usado para determinar o ícone de arquivo a ser usado na página e qual aplicativo é iniciado quando o usuário ativa o arquivo no dispositivo a partir do OneNote.
Exemplo: type="application/pdf"
Tipos de mídia de arquivo
O Microsoft Graph usa o ícone de tipos de arquivo predefinido para arquivos anexos ou um ícone genérico quando a API não reconhece o tipo de arquivo. A tabela a seguir mostra alguns tipos de arquivos comuns reconhecidos pela 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
Ver limitações que se aplicam ao criar páginas que contém mídia.
Adicionar um anexo de arquivo
No HTML de entrada da parte de Apresentação da sua solicitação, inclua <object data="name:part-name" data-attachment="file-name.file-ext" type="media-type/media-subtype" />, em que part-name é o identificador exclusivo para a parte de dados na sua solicitação de várias partes que contém os dados de arquivo binário. Basta enviar dados binários, não use Base64 ou codifique.
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--
Adicionar imagens de conteúdos de arquivo PDF
No HTML de entrada da parte de Apresentação da sua solicitação, inclua <img data-render-src="name:part-name" ... />, em que part-name é o identificador exclusivo para a parte de dados na sua solicitação de várias partes que contém os dados de arquivo binário. Basta enviar dados binários, não use Base64 ou codifique.
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--
Limitações de tamanho para solicitações de páginas de POSTAGEM
Ao enviar imagem e arquivo de dados, esteja ciente destas limitações:
A API REST do Microsoft Graph tem um limite de solicitação de 4 MB. Qualquer item maior que isso falhará com a mensagem de erro "solicitação muito grande (413)".
O limite de solicitação da subjacentes API REST do OneNote é maior, mas não pode ser acessada usando a API do Microsoft Graph.
- O limite de tamanho da POSTAGEM total é de aproximadamente 70 MB, incluindo imagens, arquivos e outros dados. O limite real é afetado pela codificação downstream, portanto, não há um limite de número de bytes fixo. As solicitações que excederem o limite podem gerar resultados não confiáveis.
- O limite de cada parte de dados é de 25 MB, incluindo os cabeçalhos das partes. Partes de dados que excedem o limite são rejeitadas pelo Microsoft Graph.
O número máximo de imagens por página é 150. Ao usar o atributo
src="https://...", a API ignora rótulos img que ultrapassam o limite.O número máximo de partes de dados é 6 por POSTAGEM, incluindo a parte obrigatória Apresentação.
Cada solicitação pode conter até cinco elementos img que usam elementos data-render-src e um objeto que usa data-render-src. Referências adicionais de imagem e arquivo são ignoradas.
O número máximo de imagens em uma POSTAGEM única é 30, não importa qual o método usado para enviá-las para a API. Imagens adicionais são ignoradas. Se quiser capturar uma página da Web que contém muitas imagens, considere capturar toda a página como um instantâneo.
Quando usar HTML ou data-render-src
Para decidir entre colocar HTML diretamente na página do OneNote em vez de usar o atributo data-render-src, considere o seguinte:
Provavelmente, a melhor maneira de enviar HTML complexo para o mecanismo de renderização é por meio de data-render-src, em vez de tentar modificar o HTML para caber naquilo que o Microsoft Graph aceita. Isso também ocorre quando o HTML inclui rótulos sem suporte.
Provavelmente, a melhor maneira de fazer a renderização de página com precisão para preservar o layout e a aparência da página é com o mecanismo de renderização por meio do data-render-src.
Geralmente, a melhor maneira de acrescentar texto diretamente editável é inserindo HTML diretamente na página. As imagens renderizadas são examinadas por um sistema de reconhecimento óptico de caracteres (OCR), mas não é a mesma coisa.
Normalmente, a melhor maneira de fazer um instantâneo no tempo para fins de histórico ou arquivamento é com o método data-render-src.
O data-render-src realmente se destaca pela funcionalidade de marcação do design da página da Web para revisões. Com as funcionalidades de escrita à tinta do OneNote, é possível desenhar na imagem para indicar alterações ou destacar áreas importantes. Com a página da Web como uma imagem fica muito mais fácil.
As imagens muito grandes ou as imagens nos formatos que o OneNote não aceita diretamente podem, às vezes, ser transformadas em miniaturas e convertidas com o atributo data-render-src mais facilmente do que se isso for feito em seu próprio código. Mesmo que a imagem também esteja disponível online, inserir os dados em sua POSTAGEM pode às vezes disponibilizar antes a página selecionada para os usuários do OneNote, reduzindo o número total de procedimentos necessários para criar a página do OneNote.
Às vezes, a melhor maneira para determinar qual método funciona melhor para os usuários é experimentar as duas formas conforme você desenvolve seu aplicativo.
Permissões
Para criar ou atualizar páginas do OneNote, solicite permissões apropriadas. Escolha o nível mais baixo que seu aplicativo precisa para realizar o trabalho.
Permissões para páginas POST
- Notes.Create
- Notes.ReadWrite
- Notes.ReadWrite.All
Permissões para páginas PATCH
- Notes.ReadWrite
- Notes.ReadWrite.All
Para saber mais sobre escopos de permissão e como eles funcionam, confira Escopos de permissão do OneNote.
Conteúdo relacionado
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de