Блог

Главная - Вопросы по программированию - JS или Угловая копия текста с изображением

JS или Угловая копия текста с изображением

#javascript #angular #clipboard #copy-paste #clipboard.js

Вопрос:

Мне нужно скопировать как текст, так и изображение в один клик. Я попробовал код ниже. Я нажал и вставил только то, что я получаю «clip_message».

Мой HTML:

 <button id="copy" onclick="writeClipImg()"><strong>Copy</strong></button>

Мой код JS

 async function writeClipImg() {
  try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
            'text/plain': blob2,
        'image/png': blob
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
}

На самом деле я пробовал в JS. Если у меня есть решение в Angular, это тоже лучше.
Пожалуйста, помогите мне скопировать оба в один клик. Спасибо

Ответ №1:

Вероятно, мы не сможем скопировать как изображение, так и текст за этот промежуток времени.

Согласно Clipboard.write() документации:

Примечание: Вы можете передавать только один элемент буфера обмена за раз.

Я попытался передать массив cliboard.write методу, но он выдает следующую ошибку:

(индекс):29 Не реализована поддержка NotAllowedError для нескольких элементов ClipboardItems.

Кстати, вы также можете проверить этот пример.

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="copy()">Copy Button</button>
  <script>
    async function copy(){
      try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    // await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
           [blob.type]: blob
      }),
        new ClipboardItem({
            'text/plain': blob2
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
    }
  </script>
</body>
</html>

Комментарии:

1. Я знаю, что есть проблема. вот почему я обратился сюда, чтобы добиться этого.

Метки: