Использование DOM для изображения, чтобы скопировать изображение в буфер обмена - PullRequest
Новая
       32

Использование DOM для изображения, чтобы скопировать изображение в буфер обмена

0 голосов
/ 29 января 2019

В настоящее время я работаю над расширением VSCode и хотел бы скопировать изображение, созданное с помощью dom-to-image , в системный буфер обмена при запуске события.

Прямо сейчасЯ могу сохранить изображение на ПК, используя программу чтения файлов и сериализацию, но вместо этого я бы хотел напрямую скопировать в буфер обмена.

Сейчас я использую событие click для запуска нескольких различных функций для сериализации исохраните изображение на ПК, используя следующий метод: 

// Click event.
button.addEventListener('click', () => {
  const width = myDiv.offsetWidth * 2
  const height = myDiv.offsetHeight * 2
  const config = {
    width,
    height,
    style: {
      transform: 'scale(2)',
      'transform-origin': 'left top'
    }
  }
  domtoimage.toBlob(myDiv, config).then(blob => {
    serializeBlob(blob, serializedBlob => {
      shoot(serializedBlob)
    })
  })
})

// Serialization.
const serializeBlob = (blob, cb) => {
  const fileReader = new FileReader()

  fileReader.onload = () => {
    const bytes = new Uint8Array(fileReader.result)
    cb(Array.from(bytes).join(','))
  }
  function getBrightness(color) {
    const rgb = this.toRgb()
    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
  }
  fileReader.readAsArrayBuffer(blob)
}

// This function is passed the serialized data.
let lastUsedImageUri = vscode.Uri.file(path.resolve(homedir(), 'Desktop/image.png'))
  vscode.commands.registerCommand('shoot', serializedBlob => {
    vscode.window
      .showSaveDialog({
        defaultUri: lastUsedImageUri,
        filters: {
          Images: ['png']
        }
      })
      .then(uri => {
        if (uri) {
          writeSerializedBlobToFile(serializedBlob, uri.fsPath)
          lastUsedImageUri = uri
        }
      })
  })

В настоящее время это сохраняется непосредственно на ПК по запросу в диалоговом окне файла.Однако вместо этого я хотел бы скопировать изображение, полученное из domtoimage, в системный буфер обмена, как при копировании из браузера.Я знаю, что где-то в DOM существует событие copy, но я не знаю, что делать с этими знаниями или как заставить их работать.

Как мне сохранить изображение в системном буфере обмена?

1 Ответ

0 голосов
/ 30 января 2019

Я не думаю, что вы можете сделать это по соображениям безопасности. Копировать изображение в буфер обмена из браузера в Javascript? .Если нет какого-то особого способа сделать это с помощью vscode

...