利用 dom to image 将图像复制到剪贴板答案

【问题标题】：Utilizing dom to image to copy image to clipboard利用 dom to image 将图像复制到剪贴板
【发布时间】：2019-01-29 19:25:50
【问题描述】：

我目前正在开发 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 事件，但不确定如何处理该知识或如何使其发挥作用。

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

【问题讨论】：

出于安全原因，我认为您不能这样做。 stackoverflow.com/questions/2321606/…。除非有某种特定于 vscode 的方式来做到这一点。

标签： javascript dom visual-studio-code clipboard vscode-extensions

【解决方案1】：

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

【讨论】：