Blur PDF using canvas rectangle.

PDFEditor.vue

<template>
    <div class="wrapper">
        <canvas id="pdf-doc" ref="canvasRef"/>
    </div>
</template>

<script type="text/ecmascript-6">
    import * as pdfJsLib from "pdfjs-dist/build/pdf"
    import pdfJsWorker   from "pdfjs-dist/build/pdf.worker.entry"

    export default {
        name: "PdfEditor",

        data: () => ({
            context: null,
            offsetX: 0,
            offsetY: 0,

            cursorInCanvas: false,
            startX: 0,
            startY: 0,

            pdfRef: "",
            pdfUrl: "http://jobins.localhost/cv.pdf",
            pdfImage: "",

            page: 1,
            zoomScale: 1,
            rotateAngle: 0,
        }),

        created() {
            pdfJsLib.GlobalWorkerOptions.workerSrc = pdfJsWorker

            const loadingTask = pdfJsLib.getDocument(this.pdfUrl)

            loadingTask.promise.then(pdf => {
                this.pdfRef = pdf

                this.renderPdf()
            }, (error) => {
                console.error(error)
            })
        },

        mounted() {
            this.context = this.$refs.canvasRef.getContext("2d")

            const canvasOffset = this.$refs.canvasRef.getBoundingClientRect()
            this.offsetX = canvasOffset.left
            this.offsetY = canvasOffset.top

            this.$refs.canvasRef.addEventListener("mousedown", this.handleMouseIn)
            this.$refs.canvasRef.addEventListener("mousemove", this.handleMouseMove)
            this.$refs.canvasRef.addEventListener("mouseup", this.handleMouseOut)
            this.$refs.canvasRef.addEventListener("mouseout", this.handleMouseOut)
        },

        methods: {
            handleMouseIn(e) {
                if (typeof this.pdfImage === "string") {
                    this.saveInitialCanvas()
                }
                e.preventDefault()
                e.stopPropagation()

                console.log("mouse in")

                const canvasWidth = this.$refs.canvasRef.width
                const canvasClientWidth = this.$refs.canvasRef.clientWidth

                this.startX = ((e.offsetX * canvasWidth) / canvasClientWidth) | 0
                this.startY = ((e.offsetY * canvasWidth) / canvasClientWidth) | 0

                this.cursorInCanvas = true
            },
            handleMouseMove(e) {
                e.preventDefault()
                e.stopPropagation()

                if (!this.cursorInCanvas) {
                    return
                }

                const canvasWidth = this.$refs.canvasRef.width
                const canvasHeight = this.$refs.canvasRef.height
                const canvasClientWidth = this.$refs.canvasRef.clientWidth

                const mouseX = ((e.offsetX * canvasWidth) / canvasClientWidth) | 0
                const mouseY = ((e.offsetY * canvasWidth) / canvasClientWidth) | 0

                const width = mouseX - this.startX
                const height = mouseY - this.startY

                console.log("mouse move")
                console.log(mouseX, mouseY, width, height)

                if (this.context && width && height) {
                    this.context.filter = "blur(5px)"
                    this.context.drawImage(this.pdfImage, 0, 0)

                    const blurredImage = this.context.getImageData(this.startX, this.startY, width, height)
                    this.context.clearRect(0, 0, canvasWidth, canvasHeight)
                    this.context.filter = "none"
                    this.context.drawImage(this.pdfImage, 0, 0)
                    this.context.putImageData(blurredImage, this.startX, this.startY)

                    this.context.beginPath()
                    this.context.rect(this.startX, this.startY, width, height)
                    this.context.strokeStyle = "$1b9aff"
                    this.context.lineWidth = 1
                    this.context.stroke()
                    // this.context.fillStyle = "rgba(0, 0, 0, 1)"
                    // this.context.fillRect(this.startX, this.startY, width, height)
                }
            },
            handleMouseOut(e) {
                e.preventDefault()
                e.stopPropagation()

                console.log("mouse out")
                this.saveInitialCanvas()
                this.cursorInCanvas = false
            },

            saveInitialCanvas() {
                const canvasPic = new Image()
                canvasPic.src = this.$refs.canvasRef.toDataURL()
                this.pdfImage = canvasPic
            },

            renderPdf() {
                if (!this.pdfRef) {
                    return
                }

                this.pdfRef.getPage(this.page).then(page => {
                    const viewport = page.getViewport({
                        scale: this.zoomScale,
                        rotation: this.rotateAngle,
                    })

                    const canvas = this.$refs.canvasRef
                    canvas.height = viewport.height
                    canvas.width = viewport.width

                    const renderContext = {
                        canvasContext: canvas?.getContext("2d"),
                        viewport: viewport,
                        textContext: this.pdfRef,
                    }

                    page.render(renderContext)
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .wrapper {
        position: fixed;
        top: 0;
        left: 0;
        background: #fff;
        height: 100vh;
        z-index: 99999;
        width: 50%;
    }
</style>