圖像中的可選區域/句子

我在圖像文件中有一本書。我正在編寫一個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

圖像中的可選區域/句子

回答

相關問題