Rotate StampAnnotation

Technical Support
1

I have used StampAnnotation to insert one image to canvas.Please check below image.

rotate
rotate1746×793 106 KB

How rotate this image to portrait.Now only available resize option.
Code I have used to insert image below.

                    var stampAnnot = new Annotations.StampAnnotation();
                    stampAnnot.PageNumber = docViewer.getCurrentPage();
                    stampAnnot.rotation=90;
                    stampAnnot.X = 100;
                    stampAnnot.Y = 250;
                    stampAnnot.Width = 591;
                    stampAnnot.Height = 1050;
                    stampAnnot.ImageData = image_url;
                    stampAnnot.Author = await annotManager.getCurrentUser();
                    annotManager.addAnnotation(stampAnnot);
                    annotManager.redrawAnnotation(stampAnnot);
2

Hi,

If you’re looking to rotate the stamp programmatically, you can set the Rotation property on the annotation to 0, 90, 180, or 270. (In your code sample you’re setting rotation to 90)

We currently do not have an option to rotate the stamp in the UI right now, but you can add one with a custom button. The following code should do something similar to what you’re looking for:

Webviewer({
  path: '/lib',
}, document.getElementById('viewer')).then(instance => {

  const { annotManager, Annotations } = instance;

  instance.annotationPopup.add({
    type: 'actionButton',

    dataElement: 'annot-rotate',
    img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - page manipulation - page rotation - counterclockwise - line</title><path class="cls-1" d="M22.39,11.17H20.72a5,5,0,0,0-4.17-4.93V8.67L12.39,5.33,16.55,2V4.56a6.66,6.66,0,0,1,5.84,6.61Zm-8,1s0,0,0,.05V20.5a1.5,1.5,0,0,1-1.5,1.5h-9a1.5,1.5,0,0,1-1.5-1.5V8.5A1.5,1.5,0,0,1,3.89,7H9.18a.71.71,0,0,1,.2,0l.07,0a1.07,1.07,0,0,1,.22.15l4.5,4.5a.86.86,0,0,1,.15.22.19.19,0,0,0,0,.07A1.29,1.29,0,0,1,14.38,12.2Zm-2,7.8V13H9.14a.75.75,0,0,1-.75-.75V9h-4V20Z"></path></svg>',
    onClick: () => {
      const annots = annotManager.getSelectedAnnotations();
      if (!annots || !annots[0]) return;
      const [annot] = annots;
      if (annot.Rotation === 270) {
        annot.Rotation = 0
      } else {
        annot.Rotation += 90;
      }
      annotManager.redrawAnnotation(annot);
    },
  });

  annotManager.on('annotationSelected', (annots, action) => {
    if (!annots || !annots[0]) {
      instance.disableElements(['annot-rotate'])
      return;
    }
    const [annot] = annots;
    if (annot instanceof Annotations.StampAnnotation) {
      if (action === 'selected') {
        instance.enableElements(['annot-rotate']);
        return;
      }
    }
    instance.disableElements(['annot-rotate'])
  })
});

I hope this helps!
Thanks,
Logan

3

I have tried to implement above code to my code.But i have used javascript concept when i implement the above code getting javascript error. Can you please implement above code to my code giving below.

WebViewer({
    disableFlattenedAnnotations: true,
    path: '/lib',
    licenseKey: '', // optional

    initialDoc: pdf_url,
}, document.getElementById('viewer'))
    .then(function(instance) {
        var docViewer = instance.docViewer;

        var annotManager = instance.annotManager;
        var Annotations = instance.Annotations;

        instance.setHeaderItems(function(header) {
            header.push({
                type: 'actionButton',
                img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m0 0h24v24h-24z" fill="none"></path><path d="m21 19v-14c0-1.1-.9-2-2-2h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-12.5-5.5 2.5 3.01 3.5-4.51 4.5 6h-14z"></path></svg>',
                onClick: function() {

                    onSavetwo();
                    async function onSavetwo() {
                        var stampAnnot = new Annotations.StampAnnotation();
                        stampAnnot.PageNumber = docViewer.getCurrentPage();
                        stampAnnot.rotation=180;
                        stampAnnot.X = 100;
                        stampAnnot.Y = 250;
                        stampAnnot.Width = 1050;
                        stampAnnot.Height = 591;
                        stampAnnot.ImageData = image_url;
                        stampAnnot.Author = await annotManager.getCurrentUser();

                        annotManager.addAnnotation(stampAnnot);
                        annotManager.redrawAnnotation(stampAnnot);
                    }


                }
            });
        });

        instance.setHeaderItems(function(header) {
            header.push({
                type: 'actionButton',
                img: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
                onClick: function() {

                    onSave();
                    async function onSave() {

                        var xfdf = await annotManager.exportAnnotations({ links: false, widgets: false });
                        var fileData = await docViewer.getDocument().getFileData({});
                        var blob = new Blob([fileData], {type: 'application/pdf'});

                        var data = new FormData();
                        data.append('xfdf', xfdf);
                        data.append('file', blob);
                        data.append('license','pPNmq7E8QLc5z3EiploT');

                        // Process the file
                        var response = await fetch('https://api.pdfjs.express/xfdf/merge', {
                            method: 'post',
                            body: data
                        }).then(resp => resp.json());

                        var { url, key, id } = response;

                        // Download the file
                        var mergedFileBlob = await fetch(url, {
                            headers: {
                                Authorization: key
                            }
                        }).then(resp => resp.blob())

                        var data_PDF = new FormData();
                        data_PDF.append('data' , mergedFileBlob);

                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function() {
                            if (this.readyState == 4) {
                                $('#cover-spin').hide(0);
                                $("#ed-alert").css("display", "block");
                                setTimeout(function() {  $("#ed-alert").css("display", "none"); }, 5000);
                            } else {
                                $('#cover-spin').show(0);
                            }
                        }
                        xhr.open('POST', upload_url, true);
                        xhr.send(data_PDF);



                        // Do something with blob...
                        // save(mergedFileBlob)
                    }

                }
            });
        });
    });
4

Hi there,

I’m not exactly sure what you’re asking, but I do notice that you’re setting the rotation property instead of Rotation (notice the capital ‘R’). Maybe this is your issue?

5

Dear Logan,
Your provided rotation code the image annotation not keep this exact width height when rotating.Please the check below image.
ezgif-7-a65f47b782f4
I want selected image rotate keep this width and height.This is only my last point to clear to deliver this project to my client.Please help.

6

Hi,

You should just need to swap the Width and Height properties when rotating the annotation.


    const oldHeight = annot.Height;
    annot.Height = annot.Width;
    annot.Width = oldHeight;