• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Advanced image functionality

LEGEND ,
Mar 18, 2008 Mar 18, 2008

Copy link to clipboard

Copied

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?


TOPICS
Advanced techniques

Views

462

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 08, 2015 Feb 08, 2015

Copy link to clipboard

Copied

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"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 12, 2024 Feb 12, 2024

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation