Utilizing dom to image 将图像复制到剪贴板

Question

我目前正在开发 VSCode 扩展，并希望在触发事件时将使用 dom-to-image 创建的图像复制到我的系统剪贴板。

现在我可以使用文件 reader 和序列化将图像保存到 PC，但我想直接复制到剪贴板。

现在我正在使用 click 事件触发不同的几个函数来序列化图像并将图像保存到 PC，使用以下方法：

// 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
        }
      })
  })

目前这直接保存到 PC，由文件对话框提示。但是，我不想发生这种情况，而是想将从 domtoimage 获取的图像复制到我的系统剪贴板，就像我从浏览器复制时一样。我知道在使用的 DOM 中某处有一个 copy 事件，但不确定如何处理这些知识或如何使其发挥作用。

如何将图片保存到系统剪贴板？

Answer 1

出于安全原因，我认为您不能这样做。 Copy Image to Clipboard from Browser in Javascript?。除非有某种vscode特定的方法

Utilizing dom to image 将图像复制到剪贴板

Utilizing dom to image to copy image to clipboard

javascript

clipboard

dom

visual-studio-code

vscode-extensions