You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
7.9 KiB
Plaintext
230 lines
7.9 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
|
|
<script type="text/javascript" src="/Areas/Dispatch/Content/Dispatch/Scripts/jquery-3.3.1.min.js"></script>
|
|
<style>
|
|
.menu {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background-color: #bcd2ef;
|
|
padding: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.menu li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.menu li:hover {
|
|
background-color: white;
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="btnReOpen">重新上传</button>
|
|
<span style="position:absolute;right:30px;">
|
|
<label>缩放比例：</label>
|
|
<select id="selScale">
|
|
<option value="1.0">100%</option>
|
|
<option value="1.2">120%</option>
|
|
<option value="1.5" selected="selected">150%</option>
|
|
<option value="2.0">200%</option>
|
|
</select>
|
|
|
|
</span>
|
|
<div style="width: 100%; height: 100%; overflow: scroll;" id="divCanvas">
|
|
<canvas width="1200" height="1200" id="canvas_paint">您的浏览器不支持 HTML5 canvas 标签。
|
|
</canvas>
|
|
</div>
|
|
<ul id="ulMenu" class="menu">
|
|
<li data-name="SHIPPER">发货人</li>
|
|
<li data-name="CONSIGNEE">收货人</li>
|
|
<li data-name="NOTIFYPARTY">通知人</li>
|
|
<li data-name="PORTLOAD">装货港</li>
|
|
<li data-name="PORTDISCHARGE">卸货港</li>
|
|
<li data-name="DESTINATION">目的地</li>
|
|
<li data-name="MARKS">唛头</li>
|
|
<li data-name="HSCODE">HS编码</li>
|
|
<li data-name="DESCRIPTION">货物描述</li>
|
|
<li data-name="NOPKGS">件数包装</li>
|
|
<li data-name="MEASUREMENT">尺码</li>
|
|
<li data-name="GROSSWEIGHT">毛重</li>
|
|
<li data-name="REMARK">备注</li>
|
|
</ul>
|
|
|
|
<script>
|
|
var rectColor = "#ff0000";
|
|
var canvas = null;
|
|
var context = null;
|
|
var img = null;
|
|
var scale = 1.5;
|
|
|
|
var downPos = { x: -1, y: -1 };
|
|
var upPos = { x: -1, y: -1 };
|
|
|
|
var textContent;
|
|
|
|
var fileName = '<%=ViewData["FileName"]%>';
|
|
|
|
|
|
$(function () {
|
|
if (fileName == "null" || fileName.length == 0) {
|
|
alert("参数错误");
|
|
return;
|
|
}
|
|
|
|
scale = parseFloat($("#selScale").val());
|
|
|
|
$("#selScale").on('change', function () {
|
|
scale = parseFloat($("#selScale").val());
|
|
reloadImg();
|
|
});
|
|
|
|
canvas = document.getElementById("canvas_paint");
|
|
context = canvas.getContext("2d");
|
|
canvas.addEventListener('mousedown', function (evt) {
|
|
downPos = { x: -1, y: -1 };
|
|
if (evt.button == 0) {
|
|
downPos = getMousePos(canvas, evt);
|
|
}
|
|
}, false);
|
|
|
|
canvas.addEventListener('mousemove', function (evt) {
|
|
if (downPos.x != -1 && downPos.y != -1) {
|
|
upPos = getMousePos(canvas, evt);
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
context.drawImage(img, 0, 0);
|
|
context.beginPath();
|
|
context.strokeStyle = rectColor;
|
|
context.rect(downPos.x, downPos.y, upPos.x - downPos.x, upPos.y - downPos.y);
|
|
context.closePath();
|
|
context.stroke();
|
|
}
|
|
}, false);
|
|
|
|
canvas.addEventListener('mouseup', function (evt) {
|
|
if (evt.button == 0) {
|
|
upPos = getMousePos(canvas, evt);
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
context.drawImage(img, 0, 0);
|
|
if (upPos.x != downPos.x || upPos.y != downPos.y) {
|
|
context.beginPath();
|
|
context.strokeStyle = rectColor;
|
|
|
|
var w = upPos.x - downPos.x;
|
|
var h = upPos.y - downPos.y;
|
|
context.rect(downPos.x, downPos.y, w, h);
|
|
context.closePath();
|
|
context.stroke();
|
|
|
|
$.ajax({
|
|
url: '/MvcShipping/Ocr/GetRegionText',
|
|
method: 'POST',
|
|
data: { fileName: fileName, x: parseInt(downPos.x), y: parseInt(downPos.y), w: parseInt(w), h: parseInt(h), scale: scale },
|
|
success: function (data) {
|
|
//alert(data);
|
|
if (data.length > 0) {
|
|
textContent = data;
|
|
|
|
var mX = evt.pageX - 65;
|
|
var mY = evt.pageY;
|
|
if (img.height - mY < 230) {
|
|
mY -= 230;
|
|
}
|
|
|
|
$("#ulMenu").css("left", mX);
|
|
$("#ulMenu").css("top", mY);
|
|
$("#ulMenu").show();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
downPos = { x: -1, y: -1 };
|
|
upPos = { x: -1, y: -1 };
|
|
}, false);
|
|
|
|
canvas.oncontextmenu = function (event) {
|
|
return false;
|
|
};
|
|
|
|
reloadImg();
|
|
|
|
$("#btnReOpen").click(function () {
|
|
location.href = "/MvcShipping/Ocr/UpOcrAuto";
|
|
});
|
|
|
|
|
|
//菜单
|
|
$("#ulMenu").hide();
|
|
$("#ulMenu").on('click', 'li', function () {
|
|
var name = $(this).data("name");
|
|
|
|
var tag = "textarea";
|
|
if (name == "PORTLOAD"
|
|
|| name == "PORTDISCHARGE"
|
|
|| name == "DESTINATION") {
|
|
tag = "input";
|
|
}
|
|
|
|
var eleHtml = $(window.parent.document).find(tag + "[name='" + name + "']:first");
|
|
if (name == "PORTLOAD"
|
|
|| name == "PORTDISCHARGE"
|
|
|| name == "DESTINATION"
|
|
|| name == "NOPKGS"
|
|
|| name == "HSCODE"
|
|
|| name == "MEASUREMENT"
|
|
|| name == "GROSSWEIGHT") {
|
|
eleHtml.val(textContent);
|
|
} else {
|
|
eleHtml.val(eleHtml.val() + textContent);
|
|
}
|
|
|
|
$("#ulMenu").hide();
|
|
var clickLi = $(this);
|
|
clickLi.remove();
|
|
$("#ulMenu").append(clickLi);
|
|
|
|
});
|
|
|
|
document.addEventListener('mouseup', function (evt) {
|
|
$("#ulMenu").hide();
|
|
}, false);
|
|
});
|
|
|
|
function reloadImg() {
|
|
img = new Image()
|
|
img.src = "/MvcShipping/Ocr/GetCanvasImage?fileName=" + fileName + "&scale=" + scale.toFixed(1)
|
|
img.onload = function () {
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
context.drawImage(img, 0, 0);
|
|
|
|
var btnHeight = $("#btnReOpen").height();
|
|
$("#divCanvas").css({ height: window.innerHeight - btnHeight - 22 });
|
|
}
|
|
}
|
|
|
|
function getMousePos(canvas, evt) {
|
|
var rect = canvas.getBoundingClientRect();
|
|
return {
|
|
x: evt.clientX - rect.left,
|
|
y: evt.clientY - rect.top
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|