VUE2 implements pdf annotation
Recently, there is a need for development, which needs to be used as an annotation function in pdf. Many plug-ins are used, but they are not in line with the goal. Finally, this function is completed with canvas drawing.
Article directory
foreword
If you don’t understand the specific operations and API calls of canvas, it is recommended to go to station b to learn in depth first. The specific implementation code is as follows.
提示：以下是本篇文章正文内容，下面案例可供参考
1. What is canvas?
Canvas is a web-based HTML5 application that provides an HTML element for creating and displaying graphics and animations. Canvas can be used to draw graphics, animation, video, audio, games, and more. It is part of the HTML5 standard and uses the JavaScript programming language to operate and control
2. Use steps
1. Import library
The code is as follows (example):
<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. Realize
The code is as follows (example):
//上一页
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)
}
}
},
Summarize
提示：这里对文章进行总结：
The above content is the key to realize the code logic to circle, cancel, clear and other operations on the pdf content.