javascript/css text highlight inside image - javascript

I have a text document which is in image format (PNG FILE). I want to manually highlight each sentence in that image programmatically using javascript/css. I want to use this technique on web page. Is there any idea to do that?

You would need to do some server-side processing with OCR to detect the location within the image where sentences start/end. Once you know that, you could use javascript and CSS to place styled divs over the image.

Related

How would one create an image from a website using data from a form?

I'm not sure what tags this would fall under so I apologise if the scope is too large! I'm currently trying to build a site where a user would write their name into a form and select a template to build on top of. The site would then generate an image of their name and put it over a specific box on the image template they selected.
If anyone has some suggestions on how I could approach this / resources that would help, I'd really appreciate it.
An example is posted below:
To write and manipulate image in PHP, use Imagick or PHP GD.
I would recommend Imagick as it has more image formats and quality is better. But if you want fast rendering, use GD.
Using Javascript, you can use Canvas. Here is an example to use canvas to write on image How to add text on image using JavaScript and Canvas

Change content/image when hovering an image with multiple parts

I'm trying to see if possible at all, to have the image attached change an image on the side when hovering over 1,2,3...
This means there are several parts changing the side image to another image each time. My biggest question is, is it possible to do this without cutting the image into multiple parts and keeping it as a single image with multiple hover points?
Yes it is. Very old style but you can create a so called areamap. Sample Page in German Use google chrome to translate the explanation.
But in your case its cheaper to create tabel and hover the cells ;) CSS background-image is your friend.

Lazy loading images with placeholder dominant colour

I'm looking to do something on the lines of how niice.co load their images via lazy loading.
As you can see from their website when scrolling, before lazy loading the image the background of the div where the image is placed is actually the dominant colour of the image.
I've looking around and found some plugins such as http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ but don't know how they're merging the two.
Will not work. The image isn't available while loading. You can check the color in your backend. Then: Save the color in a db and output the hex as data-attribute and use it as background in javascript or directly in the element style. Or another solution: Use the adaptive background libary if the color isn't saved. Then: Call a backend API and save the Hex. At the next request you can use the hex with javascript or in the element style.
Edit:
Thanks Empiric for the HowTo Link: https://manu.ninja/dominant-colors-for-lazy-loading-images
One more performance Tipp: Doesn't load all images at one time. It's a better UX to split the requests. If you have 8 images, 4 per line, load the first 4 images. If they are finshed: Load the second line and so on. One more important thing: If you have small profil images etc. (like stackoverflow) doesn't load this images while the content images are loading. The visitors focus point is the most important point.

writing text over image and move that text using javascript with asp.net

I want an image editor or a way (javascript code) I can write text over image and I can move that text within image area.
My project is in ASP.NET.
I want something like this.
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx
and at last I want to save that image with text.
Thanks

Combining text and an image into one "entity"

I need some assistance while working with a rich text editor (specifically the Dojo Editor dijit), but this question should apply to all RTE's.
I am seeking a way (via HTML/JS/etc, whatever works in a text editor..) to combine some text and an image, in such a way that they can be manipulated as 1 entity. So I should be able to, for instance, select the entity as a whole, and cut/paste it elsewhere in the textbox, or delete it with a single key press, etc.
I am not sure what features text editors do and don't support, but is there a feature that is equivalent to a container/wrapper/textbox, which combines the text and image into 1 single entity?
Thanks
First save image, and then add text on the image using photo editing software or word art or microsoft powerpoint. (You can try whatever.) Then save the image again with the text. Then you can use the image and text whole as a single entity. But the issue is you can't change the text dynamically on your webpage. It will become static.

Categories