I am using the plugin ScriptCam to basicly take a picture with the webcam. I want to save the img once the user clicks "snapshot to image". It can download via the web browser thats okay for now, the end goal is have the img download to a particular destination folder, i would like this to work without using any php.
My Code:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script language="JavaScript" src="scriptcam.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("#webcam").scriptcam({
showMicrophoneErrors:false,
onError:onError,
cornerRadius:20,
cornerColor:'e3e5e2',
onWebcamReady:onWebcamReady,
uploadImage:'upload.gif',
onPictureAsBase64:base64_tofield_and_image
});
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
};
function base64_toimage() {
$('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image').attr("src","data:image/png;base64,"+b64);
};
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function onError(errorId,errorMsg) {
$( "#btn1" ).attr( "disabled", true );
$( "#btn2" ).attr( "disabled", true );
alert(errorMsg);
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
$.each(cameraNames, function(index, text) {
$('#cameraNames').append( $('<option></option>').val(index).html(text) )
});
$('#cameraNames').val(camera);
}
</script>
</head>
<body>
<div style="width:330px;float:left;">
<div id="webcam">
</div>
<div style="margin:5px;">
<img src="webcamlogo.png" style="vertical-align:text-top"/>
<select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
</select>
</div>
</div>
<div style="width:135px;float:left;">
<p><button class="btn btn-small" id="btn2" onclick="base64_toimage()">Snapshot to image</button></p>
</div>
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
<a href="#" class="downloadAsImage hide" download>Download</a>
<script type="text/javascript">
$(function() {
html2canvas($('.main'), {
onrendered: function(canvas) {
$('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide');
}
});
});
</script>
</body>
</html>
I am really having a hard time with this. the script at the bottom will save the whole page and when it does this the img isn't even saved to the page. I just want to save the img only that goes into the
<div style="width:200px;float:left;">
<p><img id="image" style="width:200px;height:153px;"/></p>
</div>
Related
Can anyone please help me to understand, why I'm not able to load my jQuery functions(stored in script.js) using HTML(index.htm)
Following are the codes of:
script.js
$.get("./Components/head.htm", function(data) {
$("head").append(data);
});
$("#logo").on("error", function() {
$(this).hide();
$("#name").show();
});
$("#search").keyup(function() {
alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>SAM</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./script.js"></script>
</head>
<body>
<div id="header">
<div id="brand">
<img src="./Static/Logo.png" id="logo">
<h1 hidden id="name">SAM Store</h1>
</div>
<div>
<input type="search" id="search" list="suggest">
<datalist id="suggest">
<option value="Laptop"></option>
<option value="Mouse"></option>
<option value="Keyboard"></option>
<option value="Speaker"></option>
<option value="Earphone"></option>
</datalist>
</div>
<script>
</script>
</div>
</body>
</html>
[N.B.: Functions are working if I'm adding $.get function in index.htm and importing script.js using it, but they are not working if I'm referencing script.js on index.htm & importing $.get function. Also, the browser is successfully able to load the script.js in both of these cases]
When ever you use jquery always load the code inside an on ready statement, otherwise they will not always load on time.
$( document ).ready(function() {
$.get("Components/head.htm", function(data) {
$("head").append(data);
});
$("#logo").on("error", function() {
$(this).hide();
$("#name").show();
});
$("#search").keyup(function() {
alert($(this).val());
});
});
I have this script inside a MS Sharepoint project. The javascript is using Papaparse to process a uploaded .CSV file. Could really use some help to get this script working. When I execute the code I get error: :TypeError: $(...).parse is not a function.
// Parse data from CSV file
function uploadCSV(callBack) {
try {
$('#fileInput').parse({
config: {
// base config to use for each file
delimiter: ";",
header: true,
//preview: 15,
async:true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function(results, file) {
callBack(results.data);
}
},
before: function() {
show();
},
error: {
// executed if an error occurs while loading the file
// or if before callback aborted for some reason
},
complete: function(results) {
}
});
}
catch(err) {
alert('Error inside function uploadCSV :' + err);
}
}
It looks like the problem has to do with how I load the papaparse library. Here is the source code from the page that loads the library:
<html lang="nl">
<head>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/JS/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/JS/papaparse.min.js"></script>
<script language="javascript" type="text/javascript" src="/sites/RTZB000/Scripts/DienstImport/uploadCSV.js"></script>
</head>
<body>
<style>
...
</style>
<div class="myTable">
<div class="myTableRow">
<div class="myTableCell fileUpload">
<p class="custom-para">Selecteer CSV</p>
<input type="file" name="csv" id="fileInput" class="upload">
</div>
<div class="myTableCell" id="uploadFile">
</div>
<div class="myTableCell" id="myUpload">
<input type="button" class="inputfile-2" onclick="myTrigger()" value="Uploaden" />
</div>
<div class="cssload-loader" id="loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
<div class="myTableCell" id="mySpacer">
</div>
<div class="myTableCell" id="link1">
<a href="/sites/RTZB000/Dienststaten/Historie.aspx">
Historie
</a>
</div>
<div class="myTableCell" id="link2">
<a href="/sites/RTZB000/Lists/A_dienststaatTest/AllItems.aspx">
Alle items
</a>
</div>
<div class="myTableCell" id="link3">
<a href="/sites/RTZB000/Dienststaten/Vandaag.aspx">
Dienststaten
</a>
</div>
<div class="myTableCell" id="link4">
<a href="/sites/RTZB000/Lists/Telefoonlijst_ZHP/AllItems.aspx">
Telefoonlijst ZHP
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#uploadFile').hide();
$('#myUpload').hide();
$('#loader').hide();
// Laat de bestandsnaam zien naast de knop
document.getElementById("fileInput").onchange = function () {
var myVal = this.value.split(/\\/).slice(-1);
console.log(myVal);
document.getElementById("uploadFile").innerHTML = myVal;
$('#uploadFile').show();
$('#myUpload').show();
};
});
</script>
</body>
</html>
Maybe good to clarify that this page is part of Microsoft Sharepoint. Above html is embedded inside another html.
There are a few possibilities here:
JQuery isn't loading properly. Check your console for errors.
Something else is overriding your $ variable, probably another version of JQuery. Try to retrieve the original jQuery with $.noConflict().
The Paraparse library isn't loading as expected. Check your version of Paraparse and look for any errors in your console.
First of all I will explain how website functions. First of all user clicks on a template and that is pulled from a database into a div. I than have a button and if that button is clicked a div from that pulled template should change a color. I will now further explain that with a code:
Template pulled:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is:
#extends('layouts.master')
#section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#section('content')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
#endsection
#show
So once template is clicked it is inserted inside div id="content-link2"
Jquery:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens.
Can someone post some suggestions or solutions?
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript,
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
try this
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
You can use :
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
So I have this div on my site
<div class="col-sm-4" >
<div id="RealTimeClose" class="nest">
<div class="title-alt">
<h6>
<span class="fontawesome-resize-horizontal"></span> Deposit Feed</h6>
<div class="titleClose">
<a class="gone" href="#RealTimeClose">
<span class="entypo-cancel"></span>
</a>
</div>
<div class="titleToggle">
<a class="nav-toggle-alt" href="#RealTime">
<span class="entypo-up-open"></span>
</a>
</div>
</div>
<div id="RealTime" style="min-height:296px;padding-top:20px;" class="body-nest">
<?php include('table1.php'); ?>
</div>
</div>
And Im trying to get it to continously load data from table1.php after like 1 second intervals... how can i go about doing this
$(function() {
function reloadTable(){
$.get( "table1.php", function( data ) {
$( "#RealTime" ).html( data );
});
}
reload = setInterval(reloadTable, 1000);
});
Uing JQuery / AJAX will solve your problem.
<html>
<head>
<title>New document</title>
<script src="jquery.js"></script> <!-- This is for including the JQuery, found at https://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
});
var Interval = setInterval(function(){
$("#users").load("table1.php"); // $("#users") is a selector to select the id "users", and the load function explains itself...
}, 1000/*Refresh rate : currently one second*/);
</script>
<p>Users found: </p>
<div id="users">Users found her</div>
</body>
</html>
Sample code:
<html>
<head>
.....
</head>
<body>
<div id="content">
<form>
....
<input type="submit" onclick="loadAnotherPage()"/>
</form>
</div>
</body>
</html>
I want to load another page say edit_profile.php in the content div. How can it be achieved without refreshing the page?
I tried to use jQuery load() method. But looks like I missed something. Any help would be highly appreciated.
When you click submit button it's submit form and page refresh that's why its not working.
Instead of type submit set button and then set function onclick.
function loadAnotherPage(){
$("#content").load('edit_profile.php');
}
$(document).ready(
function() {
$('#load_file').click(
$.post('edit_profile.php',
{},
function(data){
$("#content").html(data);
},''
)
);
}
);
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="loadpage">load new page</button>
<script>
$(document).ready(function () {
$("#loadpage").click(function() {
$.get("edit_profile.php", function(response){
$("#content").html(response);
});
})
});
</script>
</body>
</html>