Copying image to clipboard javascript

Clipboard: write() method

The Clipboard method write() writes arbitrary data, such as images, to the clipboard. This can be used to implement cut and copy functionality.

The «clipboard-write» permission of the Permissions API, is granted automatically to pages when they are in the active tab.

Note: Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the compatibility table as well as Clipboard availability for more information.

Note: For parity with Google Chrome, Firefox only allows this function to work with text, HTML, and PNG data.

Syntax

Parameters

An array of ClipboardItem objects containing data to be written to the clipboard.

Return value

A Promise which is resolved when the data has been written to the clipboard. The promise is rejected if the clipboard is unable to complete the clipboard access.

Examples

This example function replaces the current contents of the clipboard with a specified string.

function setClipboard(text)  const type = "text/plain"; const blob = new Blob([text],  type >); const data = [new ClipboardItem( [type]: blob >)]; navigator.clipboard.write(data).then( () =>  /* success */ >, () =>  /* failure */ >, ); > 

The code begins by creating a new a Blob object. This object is required to construct a ClipboardItem object which is sent to the clipboard. The Blob constructor takes in the content we want to copy and its type. This Blob object can be derived from many sources; for example, a canvas.

Next, we create a new ClipboardItem object into which the blob will be placed for sending to the clipboard. The key of the object passed to the ClipboardItem constructor indicates the content type, the value indicates the content. Then write() is called, specifying both a fulfillment function and an error function.

Example of copying canvas contents to the clipboard

function copyCanvasContentsToClipboard(canvas, onDone, onError)  canvas.toBlob((blob) =>  let data = [new ClipboardItem( [blob.type]: blob >)]; navigator.clipboard.write(data).then( () =>  onDone(); >, (err) =>  onError(err); >, ); >); > 

Note: You can only pass in one clipboard item at a time.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

JavaScript. Работа с буфером, Ctrl+C Ctrl+V

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

Задача

Сделать копирование для редактора блок-схем dgrm.net.

• Копировать можно между вкладками.
• Можно копировать в Word/Google docs, тогда схема вставляется как картинка.
• Должны работать горячие клавиши Ctrl+C, Ctrl+V, Ctrl+X.
• Свои кнопки копировать/вставить, чтобы можно было копировать мышкой.
• Поддержка мобильных.

Варианты API работы с буфером

document.execCommand(‘copy’) не работает

Это API устарело и не работает. Не пытайтесь с его помощью обойти ограничения других API.

Работа с буфером в обработчиках событий ‘copy’, ‘paste’, ‘cut’

document.addEventListener('copy', evt => < evt.preventDefault(); evt.clipboardData.setData('text/plain', 'text to clipboard'); >);

Листинг 1. Пишем в буфер на событии “вставить”

В этом варианте нет возможности сделать свою кнопку “копировать”, пользователь должен нажать Ctrl+C.

navigator.clipboard.read/wright

btn.addEventListener('click', async _ => await navigator.clipboard.writeText('text to clipboard') );

Листинг 2. Пишем в буфер по клику на кнопке

Можно сделать свою кнопку “копировать”. Работает во всех браузерах и на мобильных.
В Safari есть ограничение: нельзя использовать в callback-ах. Так в Safari не работает:

btn.addEventListener('click', async _ => // create png from svg svgToPng( svg, // callback async png => await navigator.clipboard.write(. )) );

Листинг 3. Не работает в Safari. Нельзя использовать navigator.clipboard в callback-ах. Как писать картинку в буфер в следующем разделе.

Это ограничение безопасности: когда придет callback не понятно, пользователь может уже и передумал копировать.

Можно сделать так: строку гарантированно пишем в буфер, если браузер разрешит запишем картинку.

// guaranteed clipboard write await navigator.clipboard.writeText('text to clipboard'); // try to write img // if ok -> clipboard will be overwritten try < // create png from svg svgToPng( svg, // callback async png =>await navigator.clipboard.write(. )); > catch

Листинг 4. Запись текста в буфер гарантирована, если браузер разрешит запишем картинку

Как записать картинку в буфер

await navigator.clipboard.write([new window.ClipboardItem(< 'image/png': Promise.resolve(png), // png is Blob 'text/plain': Promise.resolve(new Blob(['text to clipboard'], < type: 'text/plain' >)) >)]);

Листинг 5. Запись картинки и альтернативного текста в буфер.

В буфер можно записать одновременно несколько типов данных. Например, картинку и текст. Если вставить в Word — вставится картинка, если в блокнот — текст.

Можно записывать такие типы:

Некоторые браузеры поддерживают больше типов. Эти три работают везде.

Копировать в буфер можно только png. Другие форматы картинок не поддерживаются.
При копировании браузер “очищает” png. Для безопасности браузер удаляет из png метаданные.

Неприятность для dgrm.net. Dgrm.net хранит в метаданных описание схемы. Благодаря метаданным можно открыть картинку на редактирование — рис 2.

Кастомные типы данных в буфере

‘text/plain’ из буфера можно вставить куда угодно. Хорошо использовать свой тип данных, который читает только ваше приложение. Например ‘text/dgrm’.

Для безопасности браузер связывает самодельный тип с доменом. Таким образом посторонний сайт не прочитает из буфера ваш тип данных.

Не все браузеры поддерживают самодельные типы. В Chrome можно использовать кастомные типы, они обязательно должны иметь префикс ‘web ’ -> ‘web text/dgrm’.

Не все браузеры позволяют записать не ‘text/plain’ в буфер с помощью navigator.clipboard.write. Разрешают только в обработчиках событий ‘copy’, ‘cut’. Т.е. свою кнопку “копировать” нельзя сделать.

В итоге остановился на navigator.clipboard.writeText который везде работает.

Чтение из буфера

Чтение буфера еще опаснее чем запись. Еще больше ограничений. В FireFox читать можно только в обработчике события ‘paste’. Свою кнопку “вставить” сделать нельзя, нужно чтобы пользователь нажал Ctrl V.

document.addEventListener('paste', evt => < const txt = evt.clipboardData.getData('text/plain'); >);

Листинг 6. Чтение из буфера на событии ‘paste’

В других браузерах можно использовать navigator.clipboard API.

btn.addEventListener('click', async _ => await navigator.clipboard.readText() );

Листинг 7. Чтение из буфера по кнопке

Браузер запросит разрешение пользователя. iOS Safari будет спрашивать при каждом вызове navigator.clipboard.readText.

О редакторе dgrm.net

Dgrm.net — быстрый редактор без лишних кнопок.

Развиваю редактор. Анонсы обновлений начал писать в телеграм.

Попробуйте, напишите что нравится/не нравится. Все читаю, веду список предложений.

Источник

How to copy an image to the clipboard with vanilla JavaScript

You do not need to rely upon a third-party library to copy an image to the clipboard!

With vanilla JavaScript, you can achieve this by writing an image to a HTML canvas element, extacting the image from it and serving it up to the clipboard by writing a new ClipboardItem object to it.

Table of contents

Creating an image-to-clipboard copier

The first step is to create some new elements in Javascript:

const img = new Image(); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');

The next step is to create a function that sets img.src and then writes its contents to the canvas when it has finished loading. Finally, the canvas content is extracted to produce a Blob object of type image/png .

Because this process contains an asynchronous process (waiting for the image to load), it is wrapped in a promise so that the return value of the function is a promise containing the Blob image:

function writeToCanvas(src) < return new Promise((res, rej) => < img.src = src; img.onload = function() < canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; ctx.drawImage(img,0,0) canvas.toBlob((blob) =>< res(blob); >, 'image/png'); > >); >

Now, we create a new function to handle the promise inside an asynchronous function.

The function first waits for the result of the promise to be returned and then attempts to write the Blob image to the clipboard as a new ClipboardItem .

ClipboardItem accepts an object containing the MIME type as the key and the image as the value.

Because writing the the clipboard is itself asynchronous and returns a promise, the success message awaits this process.

async function copyToClipboard(src) < const image = await writeToCanvas(src); try < await navigator.clipboard.write([ new ClipboardItem(< [image.type]: image, >) ]); console.log("Success"); > catch(e) < console.log("Copy failed: " + e); >>

Result: Image-to-clipboard copying

And here is the final result:

Copy image!  

For a fetched image

If the image to copy requires an API call, you can include a Fetch request as a first step.

The result can be converted to a Blob object by calling the blob() method on it. The resulting blob can then be passed into the createObjectURL() method that will create a local URL to the file in memory.

Use this URL to set img.src and the process then continues unchanged:

Enter image URL:  
Copy image!  

Related links

Источник