Develop Reference

Highlight OCR text in an Image

This codepen demo here reads text from a web image URL (Example: here ) which also displays its text position, for example the number 25 is between [178,183] and [193,183] (Highlighted in Green) or [178,172] and [193,183] (Highlighted in blue) which has an overall image size of 513 and 277 as stated in the console. So, I have tried to label these positions using the coordinates highlighted on image in another demo here, but it seems like the bbox (boundary box) or the baseline are all out of position is shown in my images below. I am trying to highlight text on the image which was read by the OCR using a red rectangle. May I ask how to resolve this issue so that the text are highlighted perfectly and not out of position? Any help will be appreciated :).
I have made sure the image in my demo is scaled to the correct sizes as stated by the console.
<div id="reddot-container">
<img src="https://i.ibb.co/T8ZhGjr/num.jpg" alt="Map" class="img-fluid" width="513px" height="277px">
</div>

How to position a element to exact point on the background image?

Background img shown as fig 1, requirement
Width cover mobile phone screen and height adaptive
Position number to exact point (like fig 2)
If changing fig 1 to fig 3, i can position the single line text to exact point.
Please take a look in jsbin. But it did not truly solve the problem.
I have no idea how to do if background img just like fig 1. Any other ideas to to this? Thanks.
Fig 1
Fig 2
Fig 3
English is not my native language; please excuse typing errors.

Please forgive me for my unclear expression and thanks for your attention.
Finally, i find a solution by myself.
convert background image (shown as fig 1) to svg
use svg.js to position the things i want to exact point.
Please take a look in jsbin to see what exactly i want to position

I read your post and figured out that you wand something like that
Fig.1 in your background with numbers at their exact location on forground,
like 20 in second line of yellow block of fig.2 and, 0 and 3
in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
<div class="chance-msg">还有20次机会，分享即可领取红包</div>
<div class="invite-msg">已邀请0人，还差3人，加油</div>
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
<div class="chance-msg"><span style="visibility:hidden">还有</span>20<span style="visibility:hidden">次机会，分享即可领取红包<span></div>
<div class="invite-msg"><span style="visibility:hidden">已邀请</span>0<span style="visibility:hidden">人，还差</span>3<span style="visibility:hidden">人，加油</span></div>

Fig.1 in your background with numbers at their exact location on forground, like 20 in second line of yellow block of fig.2 and, 0 and 3 in second line of red block of fig.2
well in your code which you gave at jsbin you are using fig.3 and positioning text on it with code
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油
You can do the same thing by using fig.1 and writing only text only numbers in div you only need to position your div by adding margin left or you can use span to write your numbers in or you can just do that for a quick review
还有20次机会，分享即可领取红包
已邀请0人，还差3人，加油

html, svg, css how to make mouse event not fire on transparent color

Is it possible to make a mouse event not fire on transparent color of an image?
I have a big background image and several small images which are shaped in different shapes (for example the shape of a ball). I want to catch mouse events on these small images. The problem is that events fire on the whole rect of an image. I can use image map on the background image but this is not a good idea because the small images will be changing under mouse (sprites).

You can check a number of things, either the fill of an svg shape, path or rect or also the opacity property depending on how you have made the element transparent.
For instance:
$('svg rect').mouseenter(function(){
if($(this).attr('opacity') != 0){
$('body').append('hovered element with colour');
}
});
Here is an example:
http://codepen.io/EightArmsHQ/pen/zxLbXO
Edit
With more complex images like
http://mobilite.mobi/wp-content/uploads/white-rabbit-wallpapers-9.
You have two options. The (to me, a graphic designer turned web designer) the simpler way would be to create an SVG hit map)
But a solution that would be far more thorough would be to use HTML5 / JavaScript canvas element which can have all of this stuff included, but will be more complex to initially code.
If you use the words canvas alpha hit detection I'm sure you'll be able to google some great results, such as
Image map by alpha channel

what you can do is add classes for those small small shapes. for example
<div class="big_back" id="big_back">
<div class="small_shapes" id="shape1">
</div>
<div class="small_shapes" id="shape2">
</div>
<div class="small_shapes" id="shape3">
</div>
</div>
and in jquery you can call the method as follow
$(document).ready(function() {
$(".small_shapes").mouseenter(function() {
alert("I enteres shapes");
});
});
If this is not what you are looking let me know.

kinetic js image is cropped in memory when dragging

I have applied dragging (built in ability) on my group which consists of image object and 4 anchor objects (shapes).
When I move group all works ok, but when I want to save that image. Image gets cropped as Image(group) is moved away of (0,0) position. If I load image and save it when it is on (0,0) position get full image in file, but if dragged it away from 0,0 than my image gets cropped progressively, when I save it.
I observed what toDataURL() is returning and really further I go from 0,0 string gets shorter from toDataURL()
Please can somebody help me.
Thx

If you drag the group, you must define the x,y,width,height properties of toDataURL:
A Demo: http://jsfiddle.net/m1erickson/Kr3t2/
var url=group.toDataURL({
x:group.x(),
y:group.y(),
width:group.getWidth(),
height:group.getHeight()
});

Click on a Canvas - Get a list of options depending where clicked

I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon

Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.