VUE2实现pdf批注

VUE2实现pdf批注

最近有一个开发需需求, 需要用在pdf做标注功能,用了很多插件,都和目标不太相符,最后用canvas绘制完成了此功能。

---

前言

如果有不懂canvas的具体操作和api调用，推荐先去b站深入学习，具体实现操作代码如下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、canvas是什么？

Canvas是一个基于Web的HTML5应用程序，它提供了一个用于创建和展示图形和动画的HTML元素。Canvas可以用来绘制图形、动画、视频、音频、游戏等等。它是HTML5标准的一部分，使用JavaScript编程语言来操作和控制

二、使用步骤

1.引入库

代码如下（示例）：

		<el-button size="mini">{{ pageNum }}/{{ numPages }}</el-button>
        <el-button size="mini" type @click="resetAll">清空</el-button>
        <el-button size="mini" type @click="handleRepealCancvs">撤销</el-button>
        <el-button size="mini" type @click="downLoad">下载</el-button>
        <el-button size="mini" type @click="radioClick('R')">矩形绘制</el-button>
        <el-button size="mini" type="primary" @click="btnPre">上一页</el-button>
        <el-button size="mini" type="success" @click="btnNext">下一页</el-button>
        <el-button size="mini" type="danger">提交</el-button>

2.实现

代码如下（示例）：

	//上一页
	btnPre() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.numPages
      this.pageNum = page
    },
    //下一页
    btnNext() {
      let page = this.pageNum
      page = page < this.numPages ? page + 1 : 1
      this.pageNum = page
      // this.resetAll()
    },
    // 下载画布 这里用的是html2canvas 插件
    downLoad() {
      html2canvas(document.getElementsByClassName('pdf-canvas-warp')).then(cavans => {
        this.imgData = cavans.toDataURL('image/png')
        const fileName = 'canvas.png'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = this.imgData
          document.body.appendChild(elink)
          elink.click()
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(this.url, fileName)
        }
      })
    },
    // 关键代码实现 
    onPointerDown(e) {
      if (this.type !== 'R') {
        return
      }
      var location = this.unifyCoordinates(e.clientX, e.clientY)
      this.pointerDownLocation.x = location.x
      this.pointerDownLocation.y = location.y
      this.dragging = true
      this.saveData()
      console.log(this.rubberBandRect)
      console.log(this.pointerDownLocation)
    },
    onPointerMove(e) {
      if (this.type !== 'R') {
        return
      }
      if (this.dragging) {
        let location = this.unifyCoordinates(e.clientX, e.clientY)
        this.restoreData()
        this.makeRect(location)
        this.drawShape(location)
      }
    },

    onPointerUp(e) {
      if (this.type !== 'R') {
        return
      }
      if (this.dragging) {
        var location = this.unifyCoordinates(e.clientX, e.clientY)
        this.dragging = false
        this.restoreData()
        this.makeRect(location)
        this.drawShape(location)

        this.recordHisy()
      }
    }
    //调用处 
    deactivated() {
    this.canvas.removeEventListener('pointerdown', this.onPointerDown)
    this.canvas.removeEventListener('pointermove', this.onPointerMove)
    this.canvas.removeEventListener('pointerup', this.onPointerUp)
  },
  methods: {
    initImage() {
      this.canvas = this.$refs.mycanvss
      this.ctx = this.canvas.getContext('2d')
      const image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = this.img
      image.onload = () => {
        // 图片加载完，再draw 和 toDataURL
        if (image.complete) {
          this.canvas.width = image.width
          this.canvas.height = image.height
          this.imageObj = image
          this.ctx.drawImage(image, 0, 0)
          this.ctx.globalCompositeOperation = 'R'
          this.canvas.addEventListener('pointerdown', this.onPointerDown)
          this.canvas.addEventListener('pointermove', this.onPointerMove)
          this.canvas.addEventListener('pointerup', this.onPointerUp)
          let imgData = this.canvas.toDataURL()
          this.historyList.push(imgData)
        }
      }
    },

---

总结

提示：这里对文章进行总结：

以上内容是关键实现代码逻辑可对pdf内容进行圈注，撤销，清空等操作。