图像中的可选区域/句子

我在图像文件中有一本书。我正在编写一个Web应用程序，可以加载图书并一次显示一个页面。我想知道如何在页面中选择一个句子并显示一条消息。据我所知，它有一些与图像坐标。图像中的可选区域/句子

请参阅http://epaper.dawn.com/其中可选择新闻。我只想在图像中选择句子并显示一些消息。我应该如何做到这一点？谢谢。

2013-08-01 mrd

谷歌OCR .net和去那里。 – Icarus

我不想识别字符。我只想在图片上选择一个区域，就像上面的示例网站一样。 – mrd

@JeevanJose - 说什么？请查看此链接：http://epaper.dawn.com/2013/08/01/pages/01_08_2013_001.jpg该页面正在使用图像映射。制作一个html工具非常简单，它允许用户为同一目的定义他们自己的多边形/矩形。不幸的是，这是一个手动过程来定义它们中的每一个 - 每个区域最少3次点击 - 对角2次，1将定义的矩形添加到页面上的多边形列表中。 – enhzflep

你知道在哪里可以选择或换句话说，字符或句子在哪里？这本书是否改变或总是一样？如果光学字符识别不是解决方案，那么您需要全面了解文本的位置，然后您只能添加透明文本以供选择，因为无法从光栅化图像中选择任何文本。

如果您将所有信息与图像分开，您可以使用HTML和CSS将每个字符放在原始顶部。您需要将每个字符正确放置在正确位置的图像顶部。

在路上的龙是：

你需要依靠最有可能的绝对定位，这需要繁琐的工作，并可能会破坏复制和粘贴在某些情况下在接收端无法删除那些（复制通常会复制包含的样式）或者
您需要使用完全相同的字体，它们具有相同的间距，字距调整，对齐方式，线条高度等等 - 从本质上来说，显示栅格图像的想法毫无用处，无论如何它的数字副本

您希望提供的选择越多，对角色，句子，段落，页面有更多的选择，就会越困难。

来源

2013-08-01 13:27:07 adrenalin

我打算在每个页面的文本/ xml文件中存储坐标。这将是手动工作。我只想看看一些示例源代码，以了解图像与坐标是如何工作的...需要一些示例代码。 – mrd

这是我在前段时间提出的另一个类似问题的解决方案。您需要单击第二张图像以定义点 - 矩形的对角或多边形的顺时针或逆时针方向上的连续点，然后单击相应的按钮以添加矩形或多边形到图像地图。

然后，您可以将鼠标悬停在第一张图片的相应区域上，查看该区域的轮廓并突出显示。

这是相当粗糙，并没有提供错误检查，但表明了原则。使用Chrome进行测试。

希望它对你有一些用处。 :)

<!DOCTYPE html> 
<html> 
<head> 
<script> 
var canvas, hdc, markerImg; 
var curPoints; 

function byId(e){return document.getElementById(e);} 

function canvasClick2(e) 
{ 
    e = e || event; 

    var x, y; 

    x = e.offsetX; 
    y = e.offsetY; 

    curPoints.push(x); 
    curPoints.push(y); 

    hdc.drawImage(markerImg, x- markerImg.width/2, y-markerImg.height/2); 

    n = curPoints.length; 
    var str = '' 
    for (i=0; i<n; i++) 
    { 
     if (i != 0) 
      str += ', '; 
     str += curPoints[i]; 
    } 
    byId('coords').innerHTML = str; 
} 

function myInit() 
{ 
    curPoints = new Array(); 
    canvas = byId('canvas1'); 
    hdc = canvas.getContext('2d'); 
    markerImg = new Image(); 

    // just a 5x5 pixel image of a '+' symbol - a cross-hair. 
    markerImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC"; 

    canvas.addEventListener('click', canvasClick2, false); 

    var img = byId('img1'); 
    canvas.setAttribute('width', img.width); 
    canvas.setAttribute('height', img.height); 
// canvas.style.backgroundImage = 'url(img/gladiators.png)'; 
    canvas.style.backgroundImage = 'url(http://i.stack.imgur.com/Rw5pL.png)'; 


    var x,y, w,h; 

    // get it's position and width+height 
    x = img.offsetLeft; 
    y = img.offsetTop; 
    w = img.clientWidth; 
    h = img.clientHeight; 

    // move the canvas, so it's contained by the same parent as the image 
    var imgParent = img.parentNode; 
    var can = byId('canvas2'); 
    imgParent.appendChild(can); 

    // place the canvas in front of the image 
    can.style.zIndex = 1; 

    // position it over the image 
    can.style.left = x+'px'; 
    can.style.top = y+'px'; 

    // make same size as the image 
    can.setAttribute('width', w+'px'); 
    can.setAttribute('height', h+'px'); 

    var ctx = can.getContext('2d'); 
    ctx.lineWidth = 3; 
    ctx.strokeStyle = 'red'; 
} 

function myClear() 
{ 
    hdc.clearRect(0,0, canvas.width, canvas.height); 
    curPoints.length = 0; 
    byId('coords').innerHTML = ''; 
} 

function myAddShapePoly() 
{ 
    var src, tgt = byId('imgMap1'), coordStr; 

    src = byId('coords'); 
    coordStr = src.innerHTML; 

    var newArea = document.createElement('area'); 
    newArea.setAttribute('shape', 'polygon'); 
    newArea.setAttribute('coords', coordStr); 
    newArea.setAttribute('title', 'polygon'); 

    newArea.setAttribute('onclick', 'alert("poly area clicked");'); 

    newArea.onmouseout = myLeave; 
    newArea.onmouseover = function(){myHover2(this);}; 

    tgt.appendChild(newArea); 
    myClear(); 
} 

function myAddShapeRect() 
{ 
    var src, tgt = byId('imgMap1'), coordStr; 

    src = byId('coords'); 
    coordStr = src.innerHTML; 

    var newArea = document.createElement('area'); 
    newArea.setAttribute('shape', 'rect'); 
    newArea.setAttribute('coords', coordStr); 
    newArea.setAttribute('title', 'rect'); 

    newArea.setAttribute('onclick', 'alert("rect area clicked");'); 

    newArea.onmouseout = myLeave; 
    newArea.onmouseover = function(){myHover2(this);}; 

    tgt.appendChild(newArea); 
    myClear(); 
} 



function myHover2(element) 
{ 
    var hoveredElement = element; 
    var coordStr = element.getAttribute('coords'); 
    var areaType = element.getAttribute('shape'); 

    switch (areaType) 
    { 
     case 'polygon': 
     case 'poly': 
      fillPoly(coordStr); 
      break; 

     case 'rect': 
      fillRect(coordStr); 
    } 
// byId('img1').style.cursor = 'pointer'; 
} 


function myLeave() 
{ 
    var canvas = byId('canvas2'); 
    var hdc = canvas.getContext('2d'); 
    hdc.clearRect(0, 0, canvas.width, canvas.height); 
// byId('img1').style.cursor = ''; 
} 


function fillRect(coOrdStr) 
{ 
    var canvas = byId('canvas2'); 
    var hdc = canvas.getContext('2d'); 

    var mCoords = coOrdStr.split(','); 
    var top, left, bot, right; 
    left = mCoords[0]; 
    top = mCoords[1]; 
    right = mCoords[2]; 
    bot = mCoords[3]; 
    var canvas = byId('myCanvas'); 
    var tmp = hdc.fillStyle; 

    hdc.fillStyle = "rgba(255,0,0,0.3);"; 
    hdc.fillRect(left,top,right-left,bot-top); 
    hdc.strokeRect(left,top,right-left,bot-top); 
    hdc.fillStyle = tmp; 
} 
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331" 
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point. 
function fillPoly(coOrdStr) 
{ 
    var mCoords = coOrdStr.split(','); 
    var i, n; 
    n = mCoords.length; 
    var canvas = byId('canvas2'); 
    var hdc = canvas.getContext('2d'); 

    hdc.beginPath(); 
    hdc.moveTo(mCoords[0], mCoords[1]); 
    for (i=2; i<n; i+=2) 
    { 
     hdc.lineTo(mCoords[i], mCoords[i+1]); 
    } 
    hdc.lineTo(mCoords[0], mCoords[1]); 

    tmp=hdc.fillStyle; 
    hdc.fillStyle = "rgba(255,0,0,0.3);"; 
    hdc.stroke(); 
    hdc.fill(); 
    hdc.fillStyle = tmp; 
} 

</script> 
<style> 
body 
{ 
    background-color: gray; 
} 

#canvas1 
{ 
    cursor: crosshair; 
} 
#canvas2 
{ 
    pointer-events: none;  /* make the canvas transparent to the mouse - needed since canvas is position infront of image */ 
    position: absolute; 
} 
.heading 
{ 
    font-weight: bold; 
    font-size: 24px; 
} 
</style> 
</head> 
<body onload='myInit();'> 
    <div align='center'> 
     <img src='http://i.stack.imgur.com/Rw5pL.png' id='img1' usemap='#imgMap1'/> 
      <map name='imgMap1' id='imgMap1'> 
      </map> 
     <canvas id='canvas2'></canvas> 

     <canvas id='canvas1' width='200' height='200'></canvas> 
     <br> 
     <input type='button' onclick='myClear();' value='clear'/> 
     <input type='button' onclick='myAddShapePoly();' value='addPolygon (3+ points)'/> 
     <input type='button' onclick='myAddShapeRect();' value='addRect (2 points)'/> 
     <br> 
     <span id='coords'></span> 
    </div> 
</body> 
</html>

来源

2013-08-01 15:13:58 enhzflep

图像中的可选区域/句子

回答

相关问题