Как загрузить холст на сервер для декодирования QR-кода-HTML5, jquery
Как загрузить холст на сервер для декодирования QR-кода?
Моментальный снимок функции фотосъемки и uploadimage необходимо разместить полотно в качестве изображения на сервер. Но UploadImage () не работает.
Пожалуйста, проводите.
<%@ 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 () не работает.
Richard Deeming
Что "не работать" значит?
Вы получаете ошибку в консоли ошибок браузера?
Вы получаете ответ об ошибке от сервера?
Вы просмотрели сетевые запросы, чтобы попытаться диагностировать проблему?
[no name]
Привет, Ричард, спасибо за ответ. Ничего не происходит по вызову UploadImage. Он также не конвертирует и не сохраняет изображение. Какие могут быть проблемы? Нет ответа на ошибку.
Richard Deeming
Итак, какие ошибки отображаются в консоли ошибок браузера?
[no name]
WebForm1. aspx:66 Uncaught TypeError: не удается установить свойство 'src' null
[no name]
можете ли вы предоставить код для скрытого
документ.querySelector ('img'). src = canvas.toDataURL ('image / png');
в изображение и загрузить на сервер.??