So bearbeiten Sie ein PDF im Browser und speichern es auf dem Server
Hier sind die Anforderungen, die Benutzer müssen in der Lage sein, hochgeladene PDFs im Browser anzuzeigen. Sie müssen in der Lage sein, Notizen zum PDF hinzuzufügen und das aktualisierte PDF auf dem Server zu speichern, ohne es auf ihrem Computer speichern und außerhalb des Browsers öffnen zu müssen.
Vorschläge, wie dies erreicht werden kann, sind willkommen.
Übrigens arbeite ich mit einer asp.net-Website (in C #).
Ich habe keine Kontrolle darüber, wie das PDF aussieht. Es wird clientseitig hochgeladen, damit andere Benutzer es anzeigen können, und es wird ein Hinweis über dem PDF-Dokument angezeigt.
Die Lösung, die ich dachte, ist, das PDF in ein JPEG zu rendern und Javascript zu verwenden, um Koordinaten zu zeichnen, wohin die Notiz gehen sollte.
Hier ist ein kurzes Beispiel für das HTML und Javascript, das den Json of Note erzeugt (mit jQuery).
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#PDF
{
position:absolute;
top:0;
bottom:0;
width:600px;
height:800px;
background:url(assets/images/gray.png) repeat;
float:left;
}
#results
{
float:right;
}
.comment
{
position:absolute;
border:none;
background-color:Transparent;
height:300px;
width:100px;
overflow:auto;
float:left;
top:0;
right:0;
font-family: Arial;
font-size:12px;
}
div.comment
{
padding-top:-20px;
}
.comment a.button
{
display:block;
padding-top:-20px;
}
</style>
</head>
<body>
<div>
<div id="PDF"></div>
<div id="results">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
var points = [];
$("#PDF").click(function(e) {
if ($("textarea.comment").length == 0) {
var that = this;
var txt = $("<textarea class='comment'></textarea>").css({ top: e.pageY, left: e.pageX }).blur(function() { $(this).remove(); }).keypress(function(e2) {
if (e2.keyCode == 13 && !e.shiftKey) {
var that2 = this;
$("#PDF").append($("<div class='comment'>").html(that2.value.replace(/\r/gi, "<br>")).css({ top: e.pageY, left: e.pageX }));
$(this).remove();
points.push({ "x": e.pageX, "y": e.pageY, "text": that2.value })
$("#results").append('{ "x": ' + e.pageX + ', "y": ' + e.pageY + ', "text": "' + that2.value + '" }<br/>');
}
});
$(this).append(txt);
txt.each(function() { this.focus(); })
}
});
</script>
Jetzt muss ich herausfinden, wie man: