Canvas not defined - jquery-mobile

I am experimenting with Raymond Camden's watermark code and also example from Phonegap camera API.
Camera works well.
However,
Uncaught ReferenceError: canvas is not defined
is shown in LogCat.
I have tried to place the variables in function as well as global. But the error still appears. My code is as below:
<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
<script type="text/javascript" charset="utf-8">
var watermark;
var canvasDOM;
var canvas;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
} </script>
<script type="text/javascript" charset="utf-8">
canvasDOM = $("myCanvas")[0];
canvas = canvasDOM.getContext("2d");
watermark = new Image();
watermark.src = "q1.jpg";
function cybershot() {
navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}
function camError(e) {
console.log("Camera Error");
console.log(JSON.stringify(e));
}
function camSuccess(picuri) {
console.log("Camera Success");
var img = new Image();
img.src=picuri;
img.onload = function(e) {
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
}
}
</script>
<style>
#myCanvas {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Watermark Camera</h1>
<button onclick="cybershot();">Capture Photo</button> <br>
<p/>
<canvas id="myCanvas"></canvas>
</body>
</html>

Solution
There's an error in this code.
Javascript used must be placed inside a onDeviceReady() function. It is an equivalent of classic jQuery document ready.
In this case javascript is executed inside a HEAD before BODY content is loaded into the DOM. onDeviceReady() will delay its execution until everything is loaded into the DOM.
Fixed code
Your javascript should look like this:
var canvas;
var watermark;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
canvasDOM = $("myCanvas")[0];
canvas = canvasDOM.getContext("2d");
watermark = new Image();
watermark.src = "q1.jpg";
}
function cybershot() {
navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}
function camError(e) {
console.log("Camera Error");
console.log(JSON.stringify(e));
}
function camSuccess(picuri) {
console.log("Camera Success");
var img = new Image();
img.src=picuri;
img.onload = function(e) {
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
}
}

Try moving this part (the entire content of the script block) canvasDOM = $("myCanvas")[0]; into $(document).ready(function(){ });

Related

Download PDF file using jsPDF

Trying to download PDf file using examples at https://parall.ax/products/jspdf
Relevant HTML Code is as shown below.
It keeps giving error as "Uncaught TypeError: Cannot read property 'config' of undefined jspdf.debug.js
Uncaught TypeError: Cannot read property 'canvas' of undefined" and doesn't generate any PDF file.
Thanks for your help.
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/dist/jspdf.debug.js"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/from_html.js?"></script>
<script type="text/javascript" language="javascript" src="#{applicationConfiguration.appStaticFileContextPath}/desktop/js/jsPDF-master/plugins/canvas.js?"></script>
function downloadPDF() {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#overview_tab').first();
var specialElementHandlers = {
'#banking_tab': function(element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
This code works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function saveAspdf() {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
}
</script>
<body>
<p id="to-pdf">Generating PDF</p>
</body>
</html>
<input type="button" value="save" onclick="javascript:saveAspdf()"/>

Show native camera roll exaclty with PhoneGAP (cordova) for iOS

I'm developing web app for iOS7 platform with PhoneGap and camera plugin. I want use camera roll with button for turn on capture-view(like as native picker or as facebook photo-mode).
I'm using Cordova Camera API and camera roll looks like otherwise(only photo/video, not button for turn on capture mode). I have read all documentation about plugin and tried use different set of options, but can't find solution.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

Kinetics saving image error

Im having problems with kinetics. I have a stage with kinetics with a one image and text, but that I want is export the stage to a image like myImage.jpg no like [data:image/wIlksoks.e] that it is the callback that return dataUrl() from kinetics.
Im trying with this code:
stage.toDataURL({
width: 350,
height: 350,
mimeType: "image/jpeg",
callback: function(dataUrl) {
/*
* here you can do anything you like with the data url.
* In this tutorial we'll just open the url with the browser
* so that you can see the result as an image
*/
window.open(dataUrl);
}
});
}, false);
King Regards!
You can use stage.toDataURL to get your dataURL for the server:
stage.toDataURL({
callback:function(dataURL){
// dataURL is available for saving to your server
}
});
Note: Be sure that your image and your .html are hosted on the same domain.
Otherwise your stage.toImage will fail because of CORS security.
So be sure to check your console for CORS security errors !
Alternatively:
You can use stage.toImage to create a dataURL from your image+text.
Then you can create a temp canvas to get the dataURL.
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
// dataURL is available for saving to your server
}
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/RV694/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
start();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function start(){
var kImage = new Kinetic.Image({
x: 0,
y: 0,
width: 300,
height: 300,
image:img
});
layer.add(kImage);
var kText = new Kinetic.Text({
x:20,
y:20,
fontSize:24,
fill:"blue",
text:"Hello!"
});
layer.add(kText);
layer.draw();
}
$("#stageAsImage").click(function(){
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
var imageElement=document.getElementById("newImage");
imageElement.src=dataURL;
}
});
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="stageAsImage">Save stage as image</button>
<div id="container"></div>
<img id="newImage">
</body>
</html>

HTML5 Bing Maps and Geolocation

I'm working on an windows 8 app in html5 and now I'm stuck with the map that is going to find the users location I don't know whats wrong, it says it some error I hope someone can help me because I have more to work on and i have a deadline on this project
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BingMapsJSIntro</title>
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- BingMapsJSIntro references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<!-- Bing Maps references -->
<script type="text/javascript"
src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
<!-- Our Bing Maps JavaScript Code -->
<script src="/js/bing.js"></script>
</head>
<body>
<div id="myMap"></div>
</body>
</html>
bing.js
var map;
function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var map = new Microsoft.Maps.Map($("mymap")[0],
{
credentials: "MYBINGMAPCODE",
center: new Microsoft.Maps.Location(latitude, longitude),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 10
});
var center = map.getCenter();
var pin = new Microsoft.Maps.Pushpin(center, { width: 50, height: 50, draggable: false });
map.entities.push(pin);
}
//Initialization logic for loading the map control
(function () {
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();
Your modules callback method "GetMap" is non-existant in the code you provided.
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
You need something like...
function GetMap ()
{
var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
var map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions );
}

Youtube API - getAvailableQualityLevels return an empty array

i get an empty array when i call the youtube getAvailableQualityLevels() function, but why?
The video has many quality-levels like 360p 480p ... 720p
DEMO:
http://jsbin.com/eyexah/1/edit
YT API Doc https://developers.google.com/youtube/js_api_reference#GettingReference
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" language="javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "youtube_player" };
swfobject.embedSWF('http://www.youtube.com/v/ZGx2WUbhnyM?enablejsapi=1&playerapiid=ytplayer&version=3',
'youtube',
'425',
'356',
'8',
null,
null,
params,
atts);
</script>
<script type="text/javascript" language="javascript">
function onYouTubePlayerReady()
{
console.log('# onYouTubePlayerReady');
var ytp = document.getElementById("youtube_player");
var getQuali = ytp.getAvailableQualityLevels();
console.log(getQuali);
};
</script>
</head>
<body>
<div id="youtube"></div>
</body>
</html>
This would work if the state would be playing (or 1).
add a listener for onStateChange events in your onYouTubePlayerReady function:
ytp.addEventListener('onStateChange', 'onPlayerStateChange');
and add the onPlayerStateChange function, for example:
function onPlayerStateChange(event)
{
var getQuali = ytp.getAvailableQualityLevels();
}
See a working example based on your code: http://jsbin.com/eyexah/6/edit
You can retrieve when the state is 'playing.'
Check onPlayerStateChange(event)

Resources