我如何允许访问者使用Bootstrap在图上放置标记？

我正在使用Bootstrap框架呈现响应式网页的新XPage应用程序（在Domino服务器上）。我所做的大部分工作都非常基础，而且我之前使用过这些技术。我如何允许访问者使用Bootstrap在图上放置标记？

但是，应用程序要求访问者有能力在固定图像上放置标记。举例来说，一个机动车事故索赔表格，申请人被要求指出损害发生在图上...

我想提出一个静态图片，并让游客将指标放在该图像的顶部。然后我想以某种方式保存生成的图像。如果我无法保存整合图像，我希望能够保存访问者指示器的坐标，以便我可以在后端模拟相同的标记图。

在我可以用来完成这个任务的地方是否有插件或文档化的技术，或者我应该尝试“自己推出”？我一直无法找到任何能够完成这样的事情。

在此先感谢您的任何建议！

来源

2017-08-31 Terry Boyd

我不知道的引导插件的，但你可以在Annotorious –

看一看保存与注释的图像（作为新的图像），你应该能够轻松地自己使用HTML5 canvas元素滚到渲染图像和注释，然后将内容保存为新图像。 –

如果您自己考虑使用

下面是一些jQuery代码我有将检测moue点击的坐标：

var locations = []; 
$(document).ready(function() { 

    $("#yourImageId").click(function(e){ 
     var parentOffset = $(this).offset(); 
     var relX = e.pageX - parentOffset.left; 
     var relY = e.pageY - parentOffset.top; 
     var obj = {x: relX, y:relY}; 
     locations.push(obj); 
    }); 

}

现在，您将有所有的点击坐标的全局数组。您可以将其存储到数据库中，然后在稍后使用它将标记放在图像上。

来源

2017-09-13 19:36:08

在画布中打开图像并让用户在画布上绘制。将新图像保存回Domino后。 http://www.xpagedeveloper.com/category/canvas-element

来源

2017-12-05 09:46:51

我如何允许访问者使用Bootstrap在图上放置标记？

回答

相关问题