首先,我很感激我的要求非常“雄心勃勃”,但非常感谢任何帮助,因为我不确定继续进行的最佳方式。
在我的网站(使用 PHP/MySQL 构建)上,用户上传 PDF 后,我想在页面上内联显示 PDF(我假设在 iFrame 中)。然后我需要他们能够在 PDF 顶部拖出一些“框”(我假设使用 jQuery)。然后我需要记录此框的坐标,以便稍后我可以重新创建 PDF,将新文本注入(inject)定义的“框”。
这听起来可行吗?如果不是,你还有什么建议? (请不要说 imagemagick!)
我知道如何重新创建 PDF 以注入(inject)新文本,但我的问题是如何允许用户记录这些坐标。
最佳答案
你可以使用 PDF.js在页面上呈现 PDF。 PDF.js 会将其显示为页面的一部分,因此您可以附加事件并以 Acrobat 插件显示时无法实现的方式与其交互。
我找不到用于获取坐标的现有库,因此我编写了这段代码来实现它。
$(function () {
"use strict";
var startX,
startY,
selectedBoxes = [],
$selectionMarquee = $('#selectionMarquee'),
positionBox = function ($box, coordinates) {
$box.css(
'top', coordinates.top
).css(
'left', coordinates.left
).css(
'height', coordinates.bottom - coordinates.top
).css(
'width', coordinates.right - coordinates.left
);
},
compareNumbers = function (a, b) {
return a - b;
},
getBoxCoordinates = function (startX, startY, endX, endY) {
var x = [startX, endX].sort(compareNumbers),
y = [startY, endY].sort(compareNumbers);
return {
top: y[0],
left: x[0],
right: x[1],
bottom: y[1]
};
},
trackMouse = function (event) {
var position = getBoxCoordinates(startX, startY,
event.pageX, event.pageY);
positionBox($selectionMarquee, position);
};
$(document).on('mousedown', function (event) {
startX = event.pageX;
startY = event.pageY;
positionBox($selectionMarquee,
getBoxCoordinates(startX, startY, startX, startY));
$selectionMarquee.show();
$(this).on('mousemove', trackMouse);
}).on('mouseup', function (event) {
var position,
$selectedBox;
$selectionMarquee.hide();
position = getBoxCoordinates(startX, startY,
event.pageX, event.pageY);
if (position.left !== position.right &&
position.top !== position.bottom) {
$selectedBox = $('<div class="selected-box"></div>');
$selectedBox.hide();
$('body').append($selectedBox);
positionBox($selectedBox, position);
$selectedBox.show();
selectedBoxes.push(position);
$(this).off('mousemove', trackMouse);
}
});
});
一旦显示它,您将不得不调整它以获得相对于 PDF 的坐标,但这应该让您走上正确的轨道。
关于php - 在 iFrame 中显示的 PDF 上绘制坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15638213/