如何将画布上传到服务器进行QR码解码 - HTML5,jquery [英] How to upload a canvas to the server for QR code decoding - HTML5, jquery
问题描述
如何将画布上传到服务器进行二维码解码?
函数快照正在拍照,上传图像应该将画布作为图像上传到服务器。但是UploadImage()不起作用。
请指导。
How to upload a canvas to the server for QR code decoding?
The function snapshot is taking photo and the uploadimage should upload the canvas as image to server. But UploadImage() is not working.
Please guide.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Webscanner.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<video autoplay="true" id="videoElement"></video>
</div>
</form>
<canvas id="canvas" width="800" height="600"></canvas> <!--Canvas to draw image -->
<button id="startsnap" onclick="snapshot()">Snap Photo</button>
<button id="stopsnap" onclick="myStopFunction()">Stop Photo</button>
<script>
var video = document.querySelector("#videoElement");
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true }, handleVideo, videoError);
}
else
alert('HTML5 getUserMedia() is not supported on your browser');
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome.
// Other browsers will fall back to image/png.
document.querySelector('img').src = canvas.toDataURL('image/png');
UploadImage();
}
}
function UploadImage()
{
var image = document.getElementById("canvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: "../../Home/UploadImage",
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved successfully !');
}
});
}
function videoError(e) {
// do something
}
//setInterval(snapshot, 200);
</script>
</body>
</html>
我的尝试:
函数快照正在拍照,uploadimage应该将画布作为图像上传到服务器。但是UploadImage()无效。
What I have tried:
The function snapshot is taking photo and the uploadimage should upload the canvas as image to server. But UploadImage() is not working.
推荐答案
.ajax({
type:' POST',
url: .. /../ Home / UploadImage,
data:' {imageData: ' + image + ' }',
contentType:' application / json; charset = utf-8',
dataType:' json',
success:function(msg){
alert(' 图片保存成功!');
}
});
}
函数videoError(e){
// 做点什么
}
// setInterval(snapshot,200);
< / script >
< / body >
< / html >
.ajax({ type: 'POST', url: "../../Home/UploadImage", data: '{ "imageData" : "' + image + '" }', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { alert('Image saved successfully !'); } }); } function videoError(e) { // do something } //setInterval(snapshot, 200); </script> </body> </html>
我的尝试:
函数快照正在拍照,uploadimage应该将画布作为图像上传到服务器。但是UploadImage()无效。
What I have tried:
The function snapshot is taking photo and the uploadimage should upload the canvas as image to server. But UploadImage() is not working.
再一次, document.querySelector() [ ^ ]返回第一个匹配元素。如果没有匹配元素,则返回null
。
您的文档不包含< img>
元素,所以document.querySelector('img')
将返回null
。
然后尝试在返回的值上设置.src
属性,然后获取错误,因为值null
。
这与你的问题完全相同昨天 [ ^ ],修复正好是相同:在文档中添加< img>
标记,或删除该行脚本。
Once again, document.querySelector()[^] returns the first matching element. If there is no matching element, it returnsnull
.
Your document does not contain an<img>
element, sodocument.querySelector('img')
will returnnull
.
You then attempt to set the.src
property on the returned value, and get an error because the value isnull
.
This is exactly the same problem you had yesterday[^], and the fix is exactly the same: add an<img>
tag to your document, or remove that line of script.
这篇关于如何将画布上传到服务器进行QR码解码 - HTML5,jquery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!