Question

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

请参阅可选择新闻的http://epaper.dawn.com/。我只想在图像中选择一个句子并显示一些消息。我该怎么做才能实现这个目标？感谢。

Answer 1

您知道在哪里选择或换句话说，字符或句子在哪里？这本书是改变还是总是一样的？如果光学字符识别不是解决方案，您需要获得文本所在位置的完整信息，然后您才能添加例如上面有透明文字供选择，因为无法从光栅化图像中选择任何文字。

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

途中的龙是：

您最需要依赖于绝对定位，这需要繁琐的工作，并且可能会在接收端无法删除它们的某些情况下破坏复制和粘贴（复制通常会复制包含的样式）或
您需要使用完全相同的字体，具有相同的间距，字距调整，对齐，行高等等 - 这实际上使得显示光栅图像的想法毫无用处，就像您拥有它的数字副本一样

您希望提供的选项越多，您拥有的字符，句子，段落和页面的替代选择越多，就越难以实现。

Answer 2

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

然后，您可以将鼠标悬停在第一张图片中的相应区域上，以查看概述和突出显示的区域。

它相当粗糙并且没有提供错误检查，但仍然证明了原理。使用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>

图像中的可选区域/句子

2 个答案: