如何在jsp/javascript中将图像转换为字节数组
您好，我正在成功地从扫描仪设备获取图像，我想将该图像存储在数据库中，我想我需要转换为字节数组，然后传递给控制器，但我无法将该图像转换为字节数组。 任何人都可以建议我，这是正确的方法或不是，如果它是错误的，那么什么是替代方法，请帮助我。 这是我的密码如何在jsp/javascript中将图像转换为字节数组,javascript,spring,Javascript,Spring,您好，我正在成功地从扫描仪设备获取图像，我想将该图像存储在数据库中，我想我需要转换为字节数组，然后传递给控制器，但我无法将该图像转换为字节数组。 任何人都可以建议我，这是正确的方法或不是，如果它是错误的，那么什么是替代方法，请帮助我。 这是我的密码 <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <%@taglib prefix="c" uri="http://java.sun.c
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<title>Scanning documets</title>
<script type="text/javascript"
src="http://direct.asprise.com/scan/javascript/base/scanner.js"></script>
<!-- required for scanning -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- optional -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- optional -->
<style type="text/css">
img.zoom {
margin-right: 4px;
}
body {
margin: 20px 10px;
}
</style>
<script>
// -------------- Optional status display, depending on JQuery --------------
function displayStatus(loading, mesg, clear) {
$('#info').empty(); // jQuery is used
if (loading) {
$('#info')
.html(
(clear ? '' : $('#info').html())
+ '<p><img src="http://asprise.com/legacy/product/_jia/applet/loading.gif" style="vertical-align: middle;" hspace="8"> '
+ mesg + '</p>');
} else {
$('#info').html((clear ? '' : $('#info').html()) + mesg);
}
}
// -------------- scanning related code: independent of any 3rd JavaScript library --------------
/* function scanSimple() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SIMPLE_SCAN, // simple scan without the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS,
null);
}
*/
function scan() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SCAN, // normal scan with the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS, {
'wia-version' : 2
});
}
/* function scanThenUpload() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SCAN_THEN_UPLOAD, // scan and then upload directly in the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS,
{
'upload-url': 'http://asprise.com/scan/applet/upload.php?action=upload' // target URL
,'format': 'PDF'
});
} */
/** Use this callback function to get notified about the scan result. */
function myCallBackFunc(success, mesg, thumbs, images) {
var logText;
displayStatus(false, '', true);
logText = 'Callback function invoked: success = ' + success
+ ", mesg = " + mesg;
logText += '\nThumbs: ' + (thumbs instanceof Array ? thumbs.length : 0)
+ ", images: " + (images instanceof Array ? images.length : 0)
+ ",image name" + (images instanceof Array ? images.name : 0);
logToConsole(logText, !(success || mesg == 'User cancelled.'));
displayStatus(false, '<pre>' + logText + '</pre>', true);
for (var i = 0; (images instanceof Array) && i < images.length; i++) {
addImage(images[i], document.getElementById('images'));
}
}
/** We use this to track all the images scanned so far. */
var imagesScanned = [];
function addImage(imgObj, domParent) {
imagesScanned.push(imgObj);
var imgSrc = imgObj.datatype == com_asprise_scan_datatype_BASE64 ? 'data:'
+ imgObj.mimetype + ';base64,' + imgObj.data
: imgObj.data;
var elementImg = createDomElementFromModel({
'name' : 'img',
'attributes' : {
'src' : imgSrc,
'height' : '100',
'class' : 'zoom'
}
});
$('<input>').attr({
type : 'hidden',
name : '',
})
$('#imageData').val(imgSrc);
domParent.appendChild(elementImg);
// optional UI effect that allows the user to click the image to zoom.
enableZoom();
}
function submitForm1() {
displayStatus(true, "Submitting in progress, please standby ...", true);
com_asprise_scan_submit_form_with_images('form1', imagesScanned,
function(xhr) {
alert("image :" + imagesScanned);
if (xhr.readyState == 4) { // 4: request finished and response is ready
displayStatus(false,
"<h2>Response from the server: </h2>"
+ xhr.responseText, true);
alert("before");
document.getElementById("form1").submit();
}
});
}
</script>
</head>
<body style="margin: 10px 30px;">
<div
style="display: block; position: absolute; right: 30px; top: 20px;">
<!-- <a href="http://asprise.com/" target=_blank> <img src="http://asprise.com/res/img/nav/logo.fw.png"/> </a> -->
</div>
<h2></h2>
<!-- <p style="color: #9eadc0;">For evaluation purpose only. Please order a license from <a href="http://asprise.com/" target=_blank>asprise.com</a>
| <a href="https://github.com/Asprise/scanner.js/blob/master/scanner.js-demo.html" target="_blank">View source code of this page</a>
</p> -->
<div class="panel panel-info" style="margin: 20px 0px;">
<div class="panel-heading">
<h3 class="panel-title">Scann your docs:</h3>
</div>
<div class="panel-body">
<form id="form1" action="<c:url value='/upload'/>" method="POST"
enctype="multipart/form-data" target="_blank">
<!-- <label for="field1"
style="display: inline-block; width: 150px; text-align: right;">Field
1</label> <input id="field1" name="field1" type="text" value="value 1" /> <input
type="file" name="file" /> <br> -->
<span style="height: 4px;"></span><br> <label
style="display: inline-block; width: 150px; text-align: right;">Documents</label>
<button type="button" class="btn btn-info" onclick="scan();">Scan</button>
<!-- <button type="button" class="btn btn-default" onclick="scanSimple();">Simple Scan</button>
<button type="button" class="btn btn-default" onclick="scanThenUpload();">Scan Then Upload</button> -->
<div id="images" style="margin-left: 154px; margin-top: 10px;">
<input type="hidden" name="imageName" value="" />
</div>
<input type="button" class="btn btn-primary" value="Submit form"
onclick="submitForm1();"
style="margin-left: 154px; margin-top: 20px;">
</form>
</div>
</div>
<div id="info" class="well"
style="display: block; background-color: #fff; height: 500px; margin-top: 12px; padding: 12px; overflow: scroll;">
<p>
<i>Information window</i>
</p>
</div>
<script src="http://yyx990803.github.io/zoomerang/zoomerang.js"></script>
<script>
function enableZoom() {
Zoomerang.config({
maxWidth : window.innerWidth, // 400,
maxHeight : window.innerHeight, // 400,
bgColor : '#000',
bgOpacity : .85
}).listen('.zoom');
}
</script>
</body>
</html>
扫描文件
变焦{
保证金权利：4px；
}
身体{
利润率：20px 10px；
}
//------可选状态显示，具体取决于JQuery--------------
功能显示状态（加载、mesg、清除）{
$（'#info'）.empty（）；//使用jQuery
如果（装载）{
$（“#信息”）
.html(
（清除？''：$（'#info'）.html（））
+“”
+mesg+“”）；
}否则{
$（'info'）.html（（清除：$（'info'）.html（））+mesg）；
}
}
//------扫描相关代码：独立于任何第三个JavaScript库--------------
/*函数scanSimple（）{
显示状态（真，'扫描'，真）；
com上升扫描请求（myCallBackFunc，
com\u asprise\u scan\u cmd\u method\u SIMPLE\u scan，//不带小程序UI的简单扫描
com\u asprise\u scan\u cmd\u return\u IMAGES\u和缩略图，
无效）；
}
*/
函数扫描（）{
显示状态（真，'扫描'，真）；
com上升扫描请求（myCallBackFunc，
com\u asprise\u scan\u cmd\u method\u scan，//使用小程序UI进行正常扫描
com\u asprise\u scan\u cmd\u return\u IMAGES\u和缩略图{
“wia版本”：2
});
}
/*函数scanThenUpload（）{
显示状态（真，'扫描'，真）；
com上升扫描请求（myCallBackFunc，
com\u asprise\u scan\u cmd\u method\u scan\u THEN\u UPLOAD，//直接在小程序UI中扫描然后上传
com\u asprise\u scan\u cmd\u return\u IMAGES\u和缩略图，
{
'上载url'：'http://asprise.com/scan/applet/upload.php?action=upload'//目标URL
，“格式”：“PDF”
});
} */
/**使用此回调函数获取有关扫描结果的通知*/
函数myCallBackFunc（成功、mesg、拇指、图像）{
var-logText；
显示状态（假、、真）；
logText='调用的回调函数：success='+success
+“，mesg=“+mesg；
logText+='\nThumbs:'+（thumbs数组实例？thumbs.length:0）
+，images:“+（images-instanceof-Array？images.length:0）
+，图像名称“+（数组的图像实例？图像名称：0）；
logToConsole（logText，！（成功| | mesg==“用户已取消”）；
显示状态（false、+logText+“”、true）；
对于（var i=0；（images instanceof Array）和&i文件
扫描
信息窗口
函数enableZoom（）{
Zoomerang.config({
maxWidth:window.innerWidth，//400，
maxHeight:window.innerHeight，//400，
bgColor:“#000”，
不透明度：.85
}).听（'.zoom'）；
}
var bin = window.atob(imgObj.data)
要完整使用scanner.js，您可以查阅刚刚通过多部分文件发送的文件，并将该文件转换为控制器中的字节数组。您可以利用spring或apache提供的SerializationUtils类。然后可以使用serialize（）函数将其转换为字节数组并存储在数据库中
var bin = window.atob(imgObj.data)