Stamp Editor

[elelemy]

I want to use Stamp Editor, but I don't want to upload an image from my device. Instead, I want it to pass a specific image when clicked.
How do this?

this my code

<ngx-extended-pdf-viewer [src]="'/assets/pdf-test.pdf'" [height]="'100%'" [customToolbar]="additionalButtons">
</ngx-extended-pdf-viewer>
<ng-template #additionalButtons>
    <div id="toolbarViewer">
        <div id="toolbarViewerLeft">
            <pdf-toggle-sidebar></pdf-toggle-sidebar>
            <div class="toolbarButtonSpacer"></div>
            <pdf-find-button [showFindButton]="true" [textLayer]="true"></pdf-find-button>
            <pdf-paging-area></pdf-paging-area>
        </div>
        <pdf-zoom-toolbar></pdf-zoom-toolbar>
        <div id="toolbarViewerRight">
            <pdf-rotate-page></pdf-rotate-page>
            <custom-stamp [imageUrl]="'/assets/Low-resolution-test-images.png'"></custom-stamp>
            <pdf-stamp-editor></pdf-stamp-editor>
            <pdf-presentation-mode></pdf-presentation-mode>
            <pdf-print></pdf-print>
            <pdf-download></pdf-download>
            <div class="verticalToolbarSeparator hiddenSmallView"></div>
            <pdf-toggle-secondary-toolbar></pdf-toggle-secondary-toolbar>
        </div>
    </div>
</ng-template>

[stephanrauh]

I believe you can implement such a feature using the annotation serialization API - see https://pdfviewer.net/extended-pdf-viewer/export-annotations. But if you're asking me for details - I don't know. The API I've made available is an internal, undocumented API of pdf.js. Among other things, this means it may break with the next version (and this happened in the past). This, in turn, means I'm reluctant to implement advanced features using this internal API.

However, as long as you know what you're doing, go for it. It may help to read the source code of the stamp editor: https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/src/display/editor/stamp.js

[matewis]

Hallo Stephanrauh. Can you please assist by giving a few pointers? Im suffering and cant seem to get it working

[stephanrauh]

@calixteman It seems you stamp editor is tremendously popular, and many people want to add images programmatically. Can you tell us how to do it? More to the point, how you're doing it, and whether there are future-safe entry points to your code I can use?

[matewis]

Hallo Stephanrauh,

Everything I try ends up failing. Is there any way you guys can please provide a sample of what will work? My biggest issue is it swallows all errors so I have absolutely no idea what I am doing wrong

[matewis]

If you get an answer please add it here. I'm also trying to do the same but with no luck. Should I manage to get something I will also add it

[calixteman]

It should work in passing a URL into the constructor in using the property bitmapUrl: https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/src/display/editor/stamp.js#L53.
So you can either pass a data URL or whatever you want and it should work like a charm (we just fetch the data from the url so it can be any kind of url).
The property bitmapUrl should be safe to use since we use it when a stamp annotation is pasted from the clipboard:
https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/src/display/editor/stamp.js#L555-L562
and https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/src/display/editor/stamp.js#L524

[matewis]

I have seen that and tried it, only way I could think that will work is with a serialized annotation but it is ignoring me flat.

The code below I have tried in multiple configurations. but it doesn't even trough an error on the console. just swallows it and disappears

const annotation = {
annotationType: 13,
bitmapUrl: "https://www.pngall.com/wp-content/uploads/8/Sample-PNG-Image.png",
pageIndex: 0,
rect: [
50, // height?
Math.random() * 500 + 350, // y
Math.random() * 400, // x
100, // width?
],
rotation: 0,
isSvg: false,
};
this.pdfViewerService.addEditorAnnotation(JSON.stringify(annotation));

[matewis]

If I force the annotation to an object and then add it the whole site just freezes. I have also tried uploading the file as well which is another option in the constructor and that also fails.

const annotation = {
annotationType: 13,
bitmapFile: $event.target.files[0],
pageIndex: 0,
rect: [
50, // height?
Math.random() * 500 + 350, // y
Math.random() * 400, // x
100, // width?
],
rotation: 0,
};

this.pdfViewerService.addEditorAnnotation(JSON.stringify(annotation));

What am I missing or what am I doing wrong?

[matewis]

I have seen that if I JSON stringify the annotation it ignores the text side as well. I have tried the above without making the json object a string and it does not work. I have also tried now without giving it any image file or url and expected the popup to appear but that is also not working. Please can you assist?

const annotation = {
annotationType: 13,
// bitmapFile: $event.target.files[0],
pageIndex: 0,
rect: [
50, // height?
Math.random() * 500 + 350, // y
Math.random() * 400, // x
100, // width?
],
rotation: 0,
};

// @ts-ignore
this.pdfViewerService.addEditorAnnotation(annotation);