javascript - 如何使用ajax将画布数据从javascript发送到django
问题描述
我正在开发一个 django 应用程序,用户可以在其中触发网络摄像头并拍摄照片。这张照片保存在画布中。我想将此图像发送到 django 视图,通过它,图像可以保存在 django 服务器中。
我正在使用 webrtc 来触发网络摄像头。我很难用 js 本身保存数据,并在某处读到仅靠 js 是不可能的。所以我现在正在尝试使用 ajax 将数据发送到 python,但我不能。我是使用 canvas 和 ajax 的初学者,所以详细的解释会很有帮助。
我尝试使用这些答案,但似乎都没有帮助
通过 Ajax 将画布图像数据(Uint8ClampedArray)发送到 Flask Server
到目前为止,这是我的代码
html模板
<center>
<button type="button" name="button" class='btn btn-outline-dark btn-lg' id='start'>Start Video Capture</button>
<div class="container-fluid mt-2">
<video id="video" width="640" height="480" autoplay></video><br>
<button type="button" data-toggle="modal" data-target="#image_model" class="btn btn-lg btn-dark" id="snap">Snap Photo</button>
</div>
</center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Retake</button>
<form action="{% url 'img_submit' %}" method="post" class="image_submit_form">
{% csrf_token %}
<input type="submit" value="Use Image" class="btn btn-primary" id="use_image">
</form>
不确定是否需要表单use_image
才能将数据发送到 python。
javascript代码
// Grab elements, create settings, etc.
var video = document.getElementById('video');
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
document.getElementById('start').addEventListener("click", function() {
// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true
}).then(function(stream) {
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
video.play();
});
}
$('#snap').fadeIn();
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
var dataURL = canvas.toDataURL();
$("#use_image").click(function() {
let $form = $(".image_submit_form");
let form_data = new FormData($form[0]);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
dataType: 'json',
data: JSON.stringify(dataURL),
data: {
imageBase64: dataURL
}
}).done(function() {
console.log('sent');
});
});
});
});
我很确定我搞砸了 ajax 部分。
我仍然没有编写任何代码来使用 python 保存图像,但我想如果我能以某种方式将画布数据转换为 jpeg 或 png 然后将其发送到 python,那将很容易。我也不明白为什么我们必须将画布数据转换为 base64。我们不能把它转换成png吗?
请帮我。谢谢
[编辑1]
蟒蛇视图.py
def img_submit(request):
url = request.POST.dict()
return HttpResponse(url)
解决方案
我正在使用 ajax 将 rgba 像素数组发送到 django 视图。
在您的情况下,代码如下:
var data_pixel = canvas.getContext('2d').getImageData(0, 0, 640, 480).data;
$("#use_image").click(function() {
let $form = $(".image_submit_form");
let form_data = new FormData($form[0]);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
dataType: 'json',
data: 'image': JSON.stringify(data_pixel),
}).done(function(data) {
console.log(data['response']);
});
});
此外,添加以下脚本以避免 ajax 之后的 csrf_token
// csrf code
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
在视图中:
def img_submit(request):
data_image = request.POST.get('image')
data_image_parse = json.loads(data_image) # parse JSON.stringify and would be a dictionary
data_image = list(data_image_parse.values()) # convert to list and would be length of 640 * 480 * 4
image = np.array(data_image).reshape(480, 640, 4) # here is your image data and you can save it
response = {}
response['response'] = 'whatever you want to say'
return JsonResponse(response)
请注意,django 的 DATA_UPLOAD_MAX_MEMORY_SIZE 为 2.5MB,但您可以在设置中更改此默认值。
希望这可以帮助!
推荐阅读
- linux - 一个脚本中的多个 inotify 事件
- javascript - JavaScript if/else 条件
- c++ - 如何减少活动变量的数量;直接调用lambda?
- ios - 如何正确使用带有本地标识符的获取资产?
- scala - Scala ZIO Stream——将 Stream[A] 转换为 Stream[B],其中一个 A 产生零个或多个 B
- python - 使用 PySerial 进行串行通信
- c - 从内核系统调用获取用户空间 RBP 寄存器
- javascript - 使用 if 语句确定 Firebase 用户是否可以访问某些 React Router 路径
- r - 为不同的数据框列表动态标记
- sql - 根据查询结果查询设置变量