Hi I'm dealing with a problem in my project.
The code extracts an image from a video and creates a canvas with the image extracted on it, this works fine but when trying to upload the base64 data image which is created from the video. It generates a 0 byte image on the server.
Anyone knows why??
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="https://www.dudoby.com/js/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300" autoplay></video>
</div>
<iframe style="visibility: hidden;" name="u-n"></iframe>
<button id="capture">Capture</button>
<form id="submitphoto" action="../success/upload_video" method="POST" enctype="multipart/form-data">
<div id="output">
</div>
</form>
<script type="text/javascript" src="js/video.js"></script>
</body>
</html>
JS File:
(function() {
var video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
//Capture video
navigator.getMedia({
video: true,
audio: false
}, function(stream){
video.src = vendorUrl.createObjectURL(stream);
blob = video.src;
video.play();
}, function(error) {
//An error ocurred
//error.code
});
//Get image
var video, $output;
var scale = 0.25;
var initialize = function() {
$output = $("#output");
video = $("#video").get(0);
$("#capture").click(captureImage);
};
var captureImage = function() {
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$output.prepend(img);
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "data");
input.value = canvas.toDataURL();
$output.prepend(input);
$("#submitphoto").submit();
};
$(initialize);
})();
PHP FiLE:
<?php
session_start();
ob_start();
$logged_user = $_SESSION['valid_user'];
include("../adb/thisdb.php");
error_reporting(0);
$file = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $file);
file_put_contents('../video_streaming/testimg.png', base64_decode($img));
ob_flush();
?>
EDIT>FIXED: After trying lots of things, I've finally fixed the error by changing the form url to a direct full address.
PREVIOUS:
<form target="u-n" id="submitphoto" action="../success/upload_video" method="POST" enctype="multipart/form-data">
WORKING ONE:
<form target="u-n" id="submitphoto" action="https://www.dudoby.com/success/upload_video" method="POST" enctype="multipart/form-data">
Related
I am trying to capture a photo from a webcam and store it in a FileField or ImageField. But I am not getting how to get the captured image data on request. Please check my HTML template, javascript code, and views.py. Can anyone suggest a way to get this image data captured using javascript, on submitting the form in HTML?
class UserDetails(models.Model):
User_name = models.CharField(max_length= 300)
User_phone = models.BigIntegerField()
User_address = models.TextField()
User_pic = models.FileField(upload_to='documents/%Y/%m/%d')
My HTML form
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<body class="">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div id="accordion" role="tablist">
<form method="POST" action="/usersave/" enctype="multipart/form-data">
{% csrf_token %}
....
<div class="card-body">
<div class="row">
<div class="col-md-4 ml-auto mr-auto">
<div class="form-group">
<video id="video" autoplay ></video>
<canvas id="canvas"></canvas>
</div>
<button id="startbutton1" class="btn btn-outline-secondary btn-sm">Take Photo</button>
<script src="{% static "assets/js/capture.js" %}"></script>
</div>
.....
<div class="img pull-center" >
<img id ="photo" name="photo" alt="The screen capture will appear in this box.">
</form>
</div>
</div>
</div>
</div>
Views.py
def usersave(request):
if request.method== 'POST':
User_name = request.POST["Username"]
User_phone = request.POST["Userphone"]
User_address = request.POST["Useraddress"]
pic = request.FILES["photo"]
User_info= UserDetails(User_name=User_name, User_phone=User_phone, User_address=User_address, User_pic= pic)
User_info.save()
return render(request, 'some.html')
Using this capture.js file I am able to take photo and populate the HTML file in img tag
(function() {
var width = 320;
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton1 = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton1 = document.getElementById('startbutton1');
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
if (isNaN(height)) {
height = width / (4/3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton1.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();
I know it is difficult to communicate between Javascript and Django, we should use Ajax or jQuery requests for that. But for this problem, I found a way to get the image data from the webcam to the backend(Django).
When the user captures a photo, the photo is stored in the local temp folder. We can set the src attribute of the image element in HTML with the captured image URL data, which is the URL of the image in the temp folder.
Now, when the user clicks on submit button, the src of the image will come in the post request. As src has the URL path of a captured image in the temp folder, we can read it and store it in our model. Below code is the sample.
In my views.py, I can add
path = request.POST["src"]
image = NamedTemporaryFile()
image.write(urlopen(path).read())
image.flush()
image = File(image)
name = str(image.name).split('\\')[-1]
name += '.jpg'
image.name = name
obj = Image.objects.create(image=image)
obj.save()
Rest of the code is the same as posted in the question, including the Javascript and HTML code.
In your form the img is just in a <img> tag it needs to be in an input
See this answer for how to turn DataUrl to form input
<input type="hidden" name="photo" id="photo" />
your photo should be in an input like above.
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
// Set the form value to data here
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
I am trying to get image from external link and add in a document.
Html service work fine. However, document should fill out after onload function.
How can I fix it ?
code.gs
function doGet(e){
var content = HtmlService.createHtmlOutputFromFile('index').getContent();
return HtmlService.createHtmlOutput(content);
}
function im(baseUrl){
var resp = UrlFetchApp.fetch(baseUrl);
var docID = "0000xxxxx1111"
var doc = DocumentApp.openById(docID);
doc.getChild(0).asParagraph().appendInlineImage(resp.getBlob());
return baseUrl;
}
index.html
<!DOCTYPE html>
<head>
<base target="_top">
<script>
window.onload = function() {
var url = "http://xxx.co/image.png"
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
document.getElementById('barcode').appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = url;
ctx.drawImage(image, 0, 0);
google.script.run.withSuccessHandler(function(a) {
document.getElementById("imageid").src=a;
}).im(canvas.toDataURL());
}
</script>
</head>
<body>
<img id="imageid" src="" alt="image">
</body>
</html>
There are a few problems with your HTML which is why it probably isn't working. You also had not tagged any elements with the barcode id.
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body id="barcode">
<img id="imageid" src="" alt="image">
</body>
<script>
window.onload = function() {
var url = "http://lorempixel.com/400/200/"
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
document.getElementById('barcode').appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = url;
ctx.drawImage(image, 0, 0);
google.script.run.withSuccessHandler(function(a) {
document.getElementById("imageid").src=a;
}).im(canvas.toDataURL());
}
</script>
</html>
I want to be able to click on a button on my page and load an image into a canvas at some X,Y coordinates?
The following code is what I have below. I would like the image to be in either image/photo.jpg or in the same directory but preferably in a subdirectory of the main page.
**Question: How to make a JPG show up in a canvas with the click of a button on the web page?
Code:
<!DOCTYPE html>
<html>
<script>
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image():
// img.src = "2c.jpg";
img.src = "/images/2c.jpg";
ctx.drawImage(img,0,0);
}
</script>
<body background="Black">
<div align="center">
<button type="button" onclick="draw()">Show Image on Canvas</button>
<canvas id="myCanvas" width="900" height="400" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Royal Flush $",500,50);
ctx.fillText("Striaght Flush $",500,80);
ctx.fillText("Flush $",500,110);
ctx.fillText("Four of a Kind $",500,140);
ctx.fillText("Full House $",500,170);
ctx.fillText("Three of a Kind $",500,200);
ctx.fillText("Two Pair $",500,230);
ctx.fillText("Pair of ACES $",500,260);
ctx.rect(495,10,270,350);
ctx.stroke();
</script>
</body>
</html>
March 6th, 2014 Code:
How is the following code not working. Do you have to have an ID tag on Canvas. The page will display but for some reason the image will not when the button is clicked. The image is in the same directory that my index.html file is in.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
canvas{
border: 5px solid black;
}
</style>
</html>
<button id="galaxy">Add image #1</button>
<button id="circles">Add image #2</button><span></span>
<canvas width="500" height="500"></canvas>
<script>
var Images = {};
function loadImages(list){
var total = 0;
document.querySelector("span").innerText = "...Loading...";
for(var i = 0; i < list.length; i++){
var img = new Image();
Images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
document.querySelector("span").innerText = "...Loaded.";
}
};
img.src = list[i].url;
}
}
function drawImage(img){
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(Images[img], 0, 0, 50, 50);
}
loadImages([{
name: "2c.jpg",
url: "mp.jpg"
},{
name: "mp.jpg",
url: "mp.jpg"
}]);
document.querySelector("#galaxy").addEventListener("click", function(){
drawImage("galaxy");
});
document.querySelector("#circles").addEventListener("click", function(){
drawImage("weirdCircles");
});
</script>
</html>
Wait till the image is loaded before drawing:
var img = new Image();
img.onload = function(){ /*or*/ img.addEventListener("load", function(){
ctx.drawImage(img,0,0); ctx.drawImage(img,0,0);
}; };
img.src = "/images/2c.jpg";
Demo: http://jsfiddle.net/DerekL/YcLgw/
If you have more than one image in your game,
It is better to preload all images before it starts.
Preload images: http://jsfiddle.net/DerekL/uCQAH/ (Without jQuery: http://jsfiddle.net/DerekL/Lr9Gb/)
If you are more familiar with OOP: http://jsfiddle.net/DerekL/2F2gu/
function ImageCollection(list, callback){
var total = 0, images = {}; //private :)
for(var i = 0; i < list.length; i++){
var img = new Image();
images[list[i].name] = img;
img.onload = function(){
total++;
if(total == list.length){
callback && callback();
}
};
img.src = list[i].url;
}
this.get = function(name){
return images[name] || (function(){throw "Not exist"})();
};
}
//Create an ImageCollection to load and store my images
var images = new ImageCollection([{
name: "MyImage", url: "//example.com/example.jpg"
}]);
//To pick and draw an image from the collection:
var ctx = document.querySelector("canvas").getContext("2d");
ctx.drawImage(images.get("MyImage"), 0, 0);
I have a page which uses the HTML5 getUserMedia functionality to capture an image from the user's webcam. I am having serious inconsistencies in the scaling of the captured image when it is rendered to the canvas. Only the top corner of the image is actually rendered, as if rather than capturing the video element, it is slicing a piece from the underlying stream. Oddly enough, when I go to most other sites using this technology, I do not have this problem. I am running Chrome 29.0.1547.76 m on Windows 7, running on a 2011 MacBook Pro.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var openCameraButton;
var takePictureButton;
var mediaStream;
var video;
var canvas;
var context;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
function onLoad(){
video = document.querySelector('video');
canvas = document.querySelector('canvas');
context = canvas.getContext('2d');
context.imageSmoothingEnabled = true;
context.webkitImageSmoothingEnabled = true;
context.mozImageSmoothingEnabled = true;
};
function openCamera(){
navigator.getMedia(
{ video:true, audio: false },
function(localMediaStream){
mediaStream = localMediaStream;
video.src=window.URL.createObjectURL(localMediaStream);
},
function(err){
alert('Unable to support live capture.');
}
);
}
function takePicture(){
var w = video.videoWidth;
var h = video.videoHeight;
context.drawImage(video,0,0,w,h);
canvas.style.display='block';
video.style.display='none';
}
</script>
</head>
<body onload="onLoad();">
<div>
<video autoplay style="width:640px; height:480px;"></video>
<canvas style="width:640px; height:480px; display:none;"></canvas>
</div>
<div>
<button id="openCameraButton" type="button" onclick="openCamera();" >Open Camera</button>
<button id="takePictureButton" type="button" onclick="takePicture();" >Take Picture</button>
</div>
</body>
</html>
Any ideas?
please try this:
function takePicture(){
var w = video.videoWidth;
var h = video.videoHeight;
canvas.width = w;
canvas.height = h;
context.drawImage(video,0,0,w,h);
canvas.style.display='block';
video.style.display='none';
}
I am uploading an image from PC. Then I read the file with file reader and display image by creating an img tag. Then I drag the image from the img tag into the canvas and draw it onto canvas. I'm using dragstart and onDrop events. I use datatransfer.setdata() and datatransfer.getdata() for the functionality. But on drop, the image drawn on canvas is not as original. It is a zoomed version. I don't know why is this happening!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<link href="copy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div style = "border:2px solid black;">
<canvas id = "canvas" style = "position:relative;width:1000px;height:1000px;top:0px;left:200px; border:2px solid black;" ondrop="dropIt(event);" ondragover="event.preventDefault();"> </canvas>
</div>
<div>
<input type="file" id="fileElem" accept="image/*" style="display:none" >
<div id="fileSelect" class="drop-area">Select some files</div>
</div>
<div id="thumbnail"></div>
</div>
<script type="text/javascript">
function dragIt(event) {
event.dataTransfer.setData("URL", event.target.id)
};
function dropIt(event) {
var theData = event.dataTransfer.getData("URL");
dt = document.getElementById(theData);
alert(dt.width);
alert(dt.height);
event.preventDefault();
var c = document.getElementById("canvas");
var ctx = c.getContext('2d');
ctx.drawImage(dt, 0, 0);
};
var count = 0;
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileElem.addEventListener("change",function(e){
var files = this.files
handleFiles(files)
},false)
fileSelect.addEventListener("click", function (e) {
fileElem.click();
e.preventDefault();
}, false);
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if(!file.type.match(imageType)){
console.log("Not an Image");
continue;
}
var image = document.createElement("img");
var thumbnail = document.getElementById("thumbnail");
image.file = file;
function handlefilereader(evt){
var target = evt.target || evt.srcElement;
image.src = evt.target.result;
}
if(document.all) {
image.src = document.getElementById('fileElem').value;
}
else {
var reader = new FileReader()
reader.onload = handlefilereader;
reader.readAsDataURL(file);
}
image.id = count;
count++;
thumbnail.appendChild(image);
alert(image.width);
image.draggable = true;
image.ondragstart = dragIt;
}
}
</script>
</body>
</html>
With canvas there are 2 'size' settings:
Through CSS you'll set the DISPLAY size, so to set the PHYSICAL size of the canvas, you MUST use its attributes. So NO CSS/Style.
Think about it this way: you create a IMAGE with physical size: (let's say) 400px*400px.
Then just as a normal image (jpg,png,gif) that has a physical size, you can still choose to change the DISPLAYED size and thus aspect-ratio: like 800px*600px. Even % is normally supported.
Hope this explains clearly WHY this happened and why your solution in your comment is also the correct solution!!