To Change any CSS style of an element using JQuery, you normally do this.

With a JQuery UI Button, it is a little different since it is not just one element but a group of HTML tags that make up this button.

To do so, simply get the parent of the JQuery object that you retrieved by id.

While there is no feature integrated in the API to allow you to highlight text permanently after selecting them, you may want to visit this link which provides a partial solution.

https://gist.github.com/yurydelendik/f2b846dae7cb29c86d23

Partial in the sense that the code posted in that link only highlights text after selecting them. Plus there are also some things that are lacking in the code that I will point out in the next section as well as the solution.

Problem:

  • The window.getSelection().getRangeAt(0).getClientRects() also include bounds that act like duplicates where the values of the x,y coordinates and the width and height have slight differences between them so when you highlight the text, some areas will look dark because of overlapping rectangle bounds.

Solution:

  • Loop through all the pageElement’s Div children and only add rectangle bounds where the x,y coordinates are not equal or if they are equal, check if the difference between the x,y coordinates are not more than 5. The 5 value is just my preference. You can set it to 3 if you want since so far I have noticed the maximum difference between the x,y coordinates for duplicate bounds is only 1.

Problem:

  • The code to highlight the text after you select them works but once you do a rotation or scale, the highlighted text will disappear.

Solution:

  • You need to save those rectangle bounds array in a variable and rotation or scaling happens, reload it using the array values. Your selectionRects variable should look something like this:

Problem:

  • Your selected text gets highlighted all the way to the last character of the Div content instead of the last character that you selected.

Solution:

  • Bet you used Chrome browser to do this, right? This is a common bug in Chrome browsers and the only solution that I came across with is to use a 3rd party plugin called RangeFix.js. That should fix your problem. To get the fixed bounds, call it like this:

One last thing. Once you are able to make this feature work, you also need to take into account its current rotation angle and scale value and convert them to a view of 100% and normal portrait rotation value.

This way, regardless what scale value and rotation angle your PDF is in, your original bound values will be used as basis to compute the presentation rectangle bound.

Getting a screenshot in PDF.JS is pretty simple since the functionality is already provided. You just have to know what is needed.

Remember, copying an image to clipboard varies in some browsers and some of them do not even allow it so the only thing you can do is either save it as an image, open it in a different window or use the image data URI as the source of the IMG HTML tag.

To get the screenshot of a PDF page in PDF.JS, you only need to do the following:

  1. Use the getPage() function.
  2. Within its code block, get the viewport according to the scale value of your choosing (or use the current scale value).
  3. Render the page’s Canvas context.
  4. Crop the Canvas based on your x,y coordinate and width and height.

Here is a sample code on how to get the PDF page’s Canvas.

Related Posts Plugin for WordPress, Blogger...