Question

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

现在我可以使用文件读取器和序列化将图像保存到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的方式来实现它

利用dom到图像将图像复制到剪贴板

1 个答案: