Pintura Image Editor v8.89.6

Editing PDF pages

We can use the preprocessImageFile property on the createDefaultImageReader function to load a PDFs page for editing.

Using a third-party library called PDF.js we can add PDF loading support to the editor.

We need to import pdfjsLib and the PDF.js worker script.

<!-- This defines the pdfjsLib global -->
<script src="/pdfjs-2/build/pdf.js"></script>
<script>
    // here we tell pdfjsLib where to find the worker source
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-2/build/pdf.worker.js';
</script>

Let's move on to setting up our preprocessImageFile function.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<img src="" alt="" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        processImage,
        blobToFile,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not a pdf we return the origina lfile
                if (!/pdf$/.test(file.type)) return file;

                // let's convert the pdf to a png
                const pdf = await pdfjsLib.getDocument(
                    URL.createObjectURL(file)
                ).promise;

                // get first page
                const page = await pdf.getPage(1);

                // get a scaled viewport for the pdf
                const viewport = page.getViewport({ scale: 1 });

                // create the target canvas to draw on
                const canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                // ask pdfjs to draw to the canvas
                await page.render({
                    canvasContext: canvas.getContext('2d'),
                    transform: null,
                    viewport: viewport,
                }).promise;

                // we turn the canvas into a blob
                const blob = await new Promise((resolve) =>
                    canvas.toBlob(resolve)
                );

                // Pintura Image Editor expects a File
                return blobToFile(blob, file.name);
            },
        },
    });

    editor.on('process', (imageState) => {
        document.querySelector('img').src = URL.createObjectURL(
            imageState.dest
        );
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

const editorDefaults = getEditorDefaults({
    imageReader: {
        preprocessImageFile: async (file, options, onprogress) => {
            // If is not a pdf we return the origina lfile
            if (!/pdf$/.test(file.type)) return file;

            // let's convert the pdf to a png
            const pdf = await pdfjsLib.getDocument(URL.createObjectURL(file))
                .promise;

            // get first page
            const page = await pdf.getPage(1);

            // get a scaled viewport for the pdf
            const viewport = page.getViewport({ scale: 1 });

            // create the target canvas to draw on
            const canvas = document.createElement('canvas');
            canvas.width = viewport.width;
            canvas.height = viewport.height;

            // ask pdfjs to draw to the canvas
            await page.render({
                canvasContext: canvas.getContext('2d'),
                transform: null,
                viewport: viewport,
            }).promise;

            // we turn the canvas into a blob
            const blob = await new Promise((resolve) => canvas.toBlob(resolve));

            // Pintura Image Editor expects a File
            return blobToFile(blob, file.name);
        },
    },
});

function App() {
    const [editorResult, setEditorResult] = useState(undefined);

    const handleEditorProcess = (imageState) => {
        setEditorResult(URL.createObjectURL(imageState.dest));
    };

    return (
        <div className="App">
            {editorResult && <img alt="" src={editorResult} />}

            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onProcess={handleEditorProcess}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <img v-if="editorResult" alt="" :src="editorResult" />

        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:process="handleEditorProcess($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorResult: undefined,

            editorDefaults: getEditorDefaults({
                imageReader: {
                    preprocessImageFile: async (file, options, onprogress) => {
                        // If is not a pdf we return the origina lfile
                        if (!/pdf$/.test(file.type)) return file;

                        // let's convert the pdf to a png
                        const pdf = await pdfjsLib.getDocument(
                            URL.createObjectURL(file)
                        ).promise;

                        // get first page
                        const page = await pdf.getPage(1);

                        // get a scaled viewport for the pdf
                        const viewport = page.getViewport({ scale: 1 });

                        // create the target canvas to draw on
                        const canvas = document.createElement('canvas');
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;

                        // ask pdfjs to draw to the canvas
                        await page.render({
                            canvasContext: canvas.getContext('2d'),
                            transform: null,
                            viewport: viewport,
                        }).promise;

                        // we turn the canvas into a blob
                        const blob = await new Promise((resolve) =>
                            canvas.toBlob(resolve)
                        );

                        // Pintura Image Editor expects a File
                        return blobToFile(blob, file.name);
                    },
                },
            }),
        };
    },

    methods: {
        handleEditorProcess: function (imageState) {
            this.editorResult = URL.createObjectURL(imageState.dest);
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        processImage,
        getEditorDefaults,
        blobToFile,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorResult = undefined;

    let editorDefaults = getEditorDefaults({
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not a pdf we return the origina lfile
                if (!/pdf$/.test(file.type)) return file;

                // let's convert the pdf to a png
                const pdf = await pdfjsLib.getDocument(
                    URL.createObjectURL(file)
                ).promise;

                // get first page
                const page = await pdf.getPage(1);

                // get a scaled viewport for the pdf
                const viewport = page.getViewport({ scale: 1 });

                // create the target canvas to draw on
                const canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                // ask pdfjs to draw to the canvas
                await page.render({
                    canvasContext: canvas.getContext('2d'),
                    transform: null,
                    viewport: viewport,
                }).promise;

                // we turn the canvas into a blob
                const blob = await new Promise((resolve) =>
                    canvas.toBlob(resolve)
                );

                // Pintura Image Editor expects a File
                return blobToFile(blob, file.name);
            },
        },
    });

    const handleEditorProcess = (event) => {
        const imageState = event.detail;

        editorResult = URL.createObjectURL(imageState.dest);
    };
</script>

<div>
    {#if editorResult} <img alt="" src={editorResult} /> {/if}

    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:process={handleEditorProcess}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';

import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private domSanitizer: DomSanitizer) {}

    editorResult?: string = undefined;

    editorDefaults: any = getEditorDefaults({
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not a pdf we return the origina lfile
                if (!/pdf$/.test(file.type)) return file;

                // let's convert the pdf to a png
                const pdf = await pdfjsLib.getDocument(
                    <string>(
                        this.domSanitizer.bypassSecurityTrustResourceUrl(
                            URL.createObjectURL(file)
                        )
                    )
                ).promise;

                // get first page
                const page = await pdf.getPage(1);

                // get a scaled viewport for the pdf
                const viewport = page.getViewport({ scale: 1 });

                // create the target canvas to draw on
                const canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;

                // ask pdfjs to draw to the canvas
                await page.render({
                    canvasContext: canvas.getContext('2d'),
                    transform: null,
                    viewport: viewport,
                }).promise;

                // we turn the canvas into a blob
                const blob = await new Promise((resolve) =>
                    canvas.toBlob(resolve)
                );

                // Pintura Image Editor expects a File
                return blobToFile(blob, file.name);
            },
        },
    });

    handleEditorProcess(imageState: any): void {
        this.editorResult = <string>(
            this.domSanitizer.bypassSecurityTrustResourceUrl(
                URL.createObjectURL(imageState.dest)
            )
        );
    }
}

<img *ngIf="editorResult" [src]="editorResult" alt="" />

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (process)="handleEditorProcess($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<img src="" alt="" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { processImage, blobToFile } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageReader: {
                preprocessImageFile: async (file, options, onprogress) => {
                    // If is not a pdf we return the origina lfile
                    if (!/pdf$/.test(file.type)) return file;

                    // let's convert the pdf to a png
                    const pdf = await pdfjsLib.getDocument(
                        URL.createObjectURL(file)
                    ).promise;

                    // get first page
                    const page = await pdf.getPage(1);

                    // get a scaled viewport for the pdf
                    const viewport = page.getViewport({ scale: 1 });

                    // create the target canvas to draw on
                    const canvas = document.createElement('canvas');
                    canvas.width = viewport.width;
                    canvas.height = viewport.height;

                    // ask pdfjs to draw to the canvas
                    await page.render({
                        canvasContext: canvas.getContext('2d'),
                        transform: null,
                        viewport: viewport,
                    }).promise;

                    // we turn the canvas into a blob
                    const blob = await new Promise((resolve) =>
                        canvas.toBlob(resolve)
                    );

                    // Pintura Image Editor expects a File
                    return blobToFile(blob, file.name);
                },
            },
        });

        editor.on('pintura:process', function (event) {
            const imageState = event.detail;
            $('img').attr('src', URL.createObjectURL(imageState.dest));
        });
    });
</script>