Skip to main content
N
Newsgroup_User
Inspiring
March 19, 2008
Question

Advanced image functionality

  • March 19, 2008
  • 1 reply
  • 582 views
This may sound off the wall:

I need to take a pdf and display it a person over the internet. I need them
to be able to add an image anywhere they want in that pdf (If I need to
change the pdf to a jpeg or gif, that's fine).

Imagine that they're looking at the image in their browser. They click on a
specific part of the image they want to push a thumbtack (for example) into.
The thumbtack appears on that spot of the image. They should be able to
repeat this several times, so there may end being several thumbtacks on the
image. The image then gets saved that way once they're done.

Any ideas on where to start?


This topic has been closed for replies.

1 reply

S
stefanLandmann
Participant
February 8, 2015

lt="Follow Rimshot Creative on Twitter" longdesc="https://twitter.com/#!/belleforest" /></a><a href="http://www.jobquotes.com" target="_new"><img src="Images/linkedin.png" width="32" height="32" alt="Join Rimshot Creative on Linked In"></a><a href="http://pinterest.com/rimshotcreative/" target="_new"><img src="Images/pinterest.png" width="32" height="32" alt="Start Pinning with Rimshot Creative on Pinterest"></a><a href="https://plus.google.com/101386322992063777741/posts"

    G
    gitano312839732h4m
    Participant
    February 13, 2024

    This may sound like an unusual request, but it's definitely an interesting challenge! To achieve this functionality, you might want to consider using a combination of PDF to image conversion tools, along with HTML5 Canvas and JavaScript for the interactive thumbtack placement.

    Here's a rough outline of how you could approach it:

    1. Convert the PDF to an image format like JPEG or GIF. There are several libraries and tools available for this task, depending on your programming language of choice.
    2. Display the converted image in a web browser using HTML.
    3. Utilize HTML5 Canvas to overlay interactive elements on top of the image. You can create a mechanism where users can click on specific parts of the image to place thumbtacks.
    4. Implement JavaScript functionality to handle the placement of thumbtacks based on user clicks. You'll also need to manage the position of each thumbtack and allow users to add multiple thumbtacks as needed.
    5. Provide a way for users to save the modified image with thumbtacks. You can achieve this by capturing the state of the canvas and generating a new image file to be downloaded.

    For a smoother user experience, you might also consider integrating a JavaScript library for image manipulation and interaction, such as Fabric.js or Konva.js.

    While this project may require some technical expertise, it's definitely achievable with the right tools and approach. Good luck, and feel free to reach out if you need further guidance or assistance!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices