最近项目中需要实现对pdf文件截图的功能，由于pdf有多个，且分别是通过canvas渲染到页面上的，而且同时要在浏览器和electron中可以使用。

实现思路：

• 首先获取每个canvas对象，然后存储到一个数组中，并且计算合并后的画布宽度和总高度。

这里因为使用的vue-pdf组件循环显示pdf文件，所以使用this.$refs.pdf

const pdf = this.$refs.pdf  
const len = pdf.length
// 存储pdf canvas 对象
const canvasList = []  
// 计算合并后的总高度
let maxHeight = 0 
 // 以第一页的宽度作为合并后的宽度
const maxWidth = pdf[0].$refs.canvas.width
// 循环遍历计算合并后的总高度及存储canvas对象
for (let i = 0; i < len; i++) {
  const cns = pdf[i].$refs.canvas
  maxHeight = maxHeight + cns.height
  canvasList.push(cns)
}

• 新创建一个canvas对象，并初始化。

const canvas = document.createElement('canvas')
// 初始化画布宽度和高度
canvas.width = maxWidth
canvas.height = maxHeight
const ctx = canvas.getContext('2d')

• 遍历canvas数组，通过canvas.drawImage(canvasObj, x, y, width, height)方法依次添加到新的canvas对象中。

// 开始合并pdf
let x = 0
let y = 0
canvasList.map(item => {
  ctx.drawImage(item, x, y, item.width, item.height)
  y = y + item.height
})

• 通过新canvas对象canvas.toDataURL('image/png')获取base64的图片数据。

// 获取base64的图片数据
const base64Str = canvas.toDataURL('image/png')

• 将图片数据复制到剪切板。

// 复制图片
this.copyImg(base64Str)
// 清除画布
ctx.clearRect(0, 0, maxWidth, maxHeight)

copyImg 函数：

// 将照片复制到剪贴版
    copyImg (base64Data) {
      const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
      const clipboardItemInput = new ClipboardItem({ 'image/png': blobInput })
      // 浏览器环境下
      if (navigator.clipboard) {
        navigator.clipboard.write([clipboardItemInput])
        this.$message.success('复制截图成功！')
      } else {
        // 在electron环境下
        const image = nativeImageElectron.createFromDataURL(base64Data)
        clipboardElectron.writeImage(image)
        this.$message.success('复制截图成功！')
      }
    },

其中clipboardElectron和nativeImageElectron是通过electron提供的接口定义的全局变量，代码如下：

// 剪切板
let clipboardElectron = require('electron').clipboard
// 原生图像对象
let nativeImageElectron = require('electron').nativeImage

base64 转 blob：

convertBase64ToBlob (base64, type) {
      let bytes = window.atob(base64)
      let ab = new ArrayBuffer(bytes.length)
      let ua = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
      }
      return new Blob([ab], { type: type })
    }

如果你想直接下载图片，可以使用如下方法：

function downloadFile(fileName, base64Data) {
        let aLink = document.createElement('a');
        let blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png'); 
        let evt = document.createEvent("HTMLEvents");
        //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        evt.initEvent("click", true, true);
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.click()
    }