In my iPhone phonegap application I want to capture image using camera of device.I have done with the following code but it not works.Am not able to capture image.
In the following code in HTML section i have one button and when it clicked then i will call method defined of java script.
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
function onLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
// PhoneGap is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved (taken with camera)
function onPhotoDataSuccess(imageData) {
alert("Your photo was taken successfully.");
}
// Called when a photo is successfully retrieved (out of the device's library)
function onPhotoURISuccess(imageURI) {
// Get image handle
var largeImage = document.getElementById('largeImage');
// Unhide image elements
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
largeImage.src = imageURI;
var options = new FileUploadOptions();
options.fileKey="file";
//options.fileName="newfile.txt";
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, "http://www.yourdomain.com/upload.php", win, fail, options);
// Make sure you use your own site!
}
// Success reporting
function win(r) {
alert("Code = " + r.responseCode);
alert("Response = " + r.response);
}
// Error reporting
function fail(message) {
alert('Failed because: ' + message);
}
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, fail, { quality: 30 });
}
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, fail, {
quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
</script>
</head>
<body onload="onLoad()">
<button onclick="capturePhoto();">Take a Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Upload a Photo</button>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
will you please try with the following snippet.
It capture the image from camera and also load in img tag. I tested on device.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PGCamera</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
function PictureSourceType() {};
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
function getPicture(sourceType){
var options = { quality: 10 };
if (sourceType != undefined) {
options["sourceType"] = sourceType;
}
// if no sourceType specified, the default is CAMERA
navigator.camera.getPicture(getPicture_Success, null, options);
};
function getPicture_Success(imageData){
alert("getpic success");
document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;
}
</script>
</head>
<body onload="onBodyLoad()">
<img style="width:60px;height:60px" id="test_img" src="" />
<!-- for testing, add the buttons below -->
<button onclick="getPicture()">From Camera</button>
<button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>
</body>
</html>
thanks,
Mayur
Related
I'm trying to create a simple webapp button that it will duplicate sheet in Google sheets , I created the button in HTML and linked it to run the code when its clicked ! but it doesnt seem to work !, can someone tell me what I did wrong ?
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="btn">Create</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.userClicked();
}
</script>
</body>
</html>
And here is the code for duplication :
function doGet() {
return HtmlService.createHtmlOutputFromFile('page');
}
function userClicked() {
SpreadsheetApp.getActiveSpreadsheet().duplicateActiveSheet();
var myValue = SpreadsheetApp.getActiveSheet().getRange("M1").getDisplayValue();
SpreadsheetApp.getActiveSpreadsheet().renameActiveSheet("Daily Report " + myValue);
}
Duplicating & Deleting Sheets from a WebApp
Code.gs:
function dupSheet(dObj) {
var ss=SpreadsheetApp.getActive();
var sh=ss.setActiveSheet(ss.getSheetByName(dObj.name));
ss.duplicateActiveSheet();
var name="Daily Report " + sh.getRange("A1").getDisplayValue();
if(!sheetExists(name)) {
ss.renameActiveSheet("Daily Report " + sh.getRange("A1").getDisplayValue());
}
dObj['sA']=getSheetNames().sA;
return dObj;
}
function getSheetNames() {
var ss=SpreadsheetApp.getActive();
var shts=ss.getSheets();
var sObj={sA:[]};
shts.forEach(function(sh){
sObj.sA.push(sh.getName());
})
return sObj;
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('dup');
}
function delSheet(dObj) {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName(dObj.name);
ss.deleteSheet(sh);
dObj['sA']=getSheetNames().sA;
return dObj;
}
function sheetExists(name) {
var ss=SpreadsheetApp.getActive();
var sA=ss.getSheets();
for(var i=0;i<sA.length;i++) {
if(name==sA[i].getName()) {
return true
}
}
return false;
}
dup.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(sObj){
var select=document.getElementById('sel1');
sObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<sObj.sA.length;i++) {
select.options[i]=new Option(sObj.sA[i],sObj.sA[i]);
}
})
.getSheetNames();
});
function dupSheet() {
$("#sel1").css('background-color','#ffff00');
google.script.run
.withSuccessHandler(function(rObj){
$('#sel1').css('background-color','#ffffff');
var select=document.getElementById('sel1');
rObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<rObj.sA.length;i++) {
select.options[i]=new Option(rObj.sA[i],rObj.sA[i]);
}
})
.dupSheet({name:$('#sel1').val()});
}
function delSheet() {
$("#sel1").css('background-color','#ffff00');
google.script.run
.withSuccessHandler(function(rObj){
$('#sel1').css('background-color','#ffffff');
var select=document.getElementById('sel1');
rObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<rObj.sA.length;i++) {
select.options[i]=new Option(rObj.sA[i],rObj.sA[i]);
}
})
.delSheet({name:$('#sel1').val()});
}
</script>
<style>
input{margin:2px 5px;}
</style>
</head>
<body>
<select id="sel1"></select><label for="sel1">Sheet Name</label>
<br /><input type="button" value="Duplicate Sheet" onClick="dupSheet();" />
<br /><input type="button" value="Delete Sheet" onClick="delSheet();" />
</body>
</html>
I used a little JQuery in there too.
As stated in the SpreadsheetApp reference.
getActiveSheet()
Gets the active sheet in a spreadsheet. The active sheet in a spreadsheet is the sheet that is being displayed in the spreadsheet UI.
Since you are not using any UI you should instead use other methods of accessing your Sheets and Spreadsheets, such as:
Obtaining your Spreadsheet
SpreadsheetApp.openById(id)
SpreadsheetApp.openByUrl(url)
Obtaining your Sheet(s)
Spreadsheet.getSheetByName(name)
Spreadsheet.getSheets()
I have tried so many URL variations for Flickr and all attempts have failed to load my image gallery into my own webpage.
I am pretty sure its the URL. If I replace the URL with:
"api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"
all works fine to load public photos from Flickr, but to load my own album (URL below), it won't work.
Yes I have a valid API from Flickr. I also checked the script syntax in "jsbin.com" and all of that is good.
Can anyone help resolve this?
Here is the jQuery script:
(function() {
var flickerUrl = "https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=<removed by edit>&user_id=135938131#N02&format=json&jsoncallback=?";
$.getJSON(flickerUrl)
.done(function(data) {
$.each(data.items, function(i, item) {
var image = $("<img>")
.attr("src", item.media.m)
.attr("title", item.title);
$("<a>")
.attr("href", item.link)
.attr("target", "_blank")
.html(image)
.appendTo("#images");
if ( i === 8 ) {
return false;
}
});
});
})
();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flickr Image Gallery</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Natural Scenery</h1>
<br>
<div id="images"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/flickrgallery.js"></script>
</body>
</html>
I have multiple images in an html page.I want to use html2canvas to convert the page to image.The images are local and from same source.It always keep on showing the error msg " Unable to get image data from canvas because the canvas has been tainted by cross-origin data."
The same code will work for one image or multiple copy of same image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="language" content="de">
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('#mainDiv');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var img = document.getElementById('img1');
img.src = data;
}
});
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="div1" ><p>paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 </p></div>
<div id="div2" ><p>paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 </p></div>
<img src="images/01.jpg" >
<img src="images/02.jpg" >
<img src="images/03.jpg" >
<img src="images/04.jpg" >
</div>
<img id="img1"></img>
</body>
</html>
I am not sure what does the error message mean.Also if somebody can tell me how do i make this work with multiple images, it will be very helpful
just remove what you dont need. ie, i have Div1,Div2 etc
function PrintChartCanvas(divId) {
//div canvas
var divObj = html2canvas($('#div' + divId));
var divQueu = divObj.parse();
var divCanvas = divObj.render(divQueu);
divImg = divCanvas.toDataURL();
return divImg;
}
document.getElementById("img1").src = PrintChartCanvas(3);
This should work
I have a number of very small pages which basically loads a video for use on mobile browsers. In the latest iOS (5.1.1) the video player loads, but then just spins. The video can be played by clicking on the video, but since it looks like it's still loading, people may not do that. Works everywhere else.
I'm using the youtube api code
This is a test version of the page.
http://bit.ly/S2KuN1
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Celebrity's Caribbean Shore Excursions</title>
<link href="http://www.celebritycruises.com/css/min/global.min.css" rel="stylesheet">
<link href="http://media.celebritycruises.com/celebrity/content/en_US/css/m_video.css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'PH-m591p4xg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
<script type="text/javascript" src="m_video.js"></script>
</head>
<body id="video_page">
<div class="logo"><img src="http://media.celebritycruises.com/celebrity/content/en_US/images/cel_misc/logo.jpg" alt="Celebrity Mobile" width="259" height="55" border="0"></div>
<div id="player"></div>
<div class="visit">
<p>Now visit Celebrity Cruises' official mobile website.</p>
<p><a class="ccButton large" target="_self" href="http://m.celebritycruises.com/m/home.do"> <span class="text">Explore</span> <span class="pointer"> </span> </a></p>
</div>
</body>
</html>
And here's the js for the page
// JavaScript Document
// autoplay video
function onPlayerReady(event) {
event.target.pauseVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "http://m.celebritycruises.com/m/home.do";
}
}
//style Blackberry
window.onload = function() {
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") != -1 ) {
document.getElementById("video_page").className = "bb";
}
};
Okay, I figured out how to solve it.
I changed
event.target.pauseVideo();
to
event.target.stopVideo();
I don't know what the issue is, but iOS 5.1.1 never seems to finish autoloading. Using the stopVideo() command from the YouTube api stops the process and the play button appears. Once clicked, it loads normally.
We have been playing around with the canvas element, but are encountering sluggishness on Mobile Safari whereas the app works smoothly on the desktop.
The test app is very primitive. It just lets the user draw a line using the mouse on a desktop or a finger on smart phones.
In Mobile Safari, the drawing of the line is often very jerky. The first bit of a line will render in real-time, but the rest won't render until after the finger is lifted from the screen.
Any ideas why?
Code below.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />
<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>
<style type='text/css'>
#canvas { border:1px solid red }
</style>
</head>
<body>
<div id='draw_page' data-role='page'>
<canvas id="canvas" width="500" height="350"></canvas>
</div>
<script type="text/javascript">
$('#draw_page').live('pageinit', function() {
prep_canvas();
});
</script>
</body>
</html>
JavaScript:
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var canvas;
var context;
function prep_canvas() {
canvas = $('#canvas')[0];
context = canvas.getContext("2d");
}
$('#canvas').live('vmousedown', function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').live('vmousemove', function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').live('vmouseup', function(e){
paint = false;
});
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "black";
context.lineJoin = "round";
context.lineWidth = 2;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
I followed this: http://dev.opera.com/articles/view/html5-canvas-painting/ and it works fluidly on the phone (you'll see a commented out line for img_update() which is used in the two canvas method mentioned by BumbleB2na...but I wasn't using any shapes, just lines, so left it out)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="startup-iphone.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Untitled Document</title>
<style type="text/css">
body {background:#ccc; margin:0; padding:0}
html {margin:0; padding:0;}
#container { position: relative; margin:0; padding:0px; }
#canvas { border: 1px solid #000; background-color:#FFF; position:relative; width:298px; margin-left:11px; margin-top:5px; }
</style>
</head>
<body onload="listen()">
<div id="container">
<canvas id="canvas" width="298" height="298">
</canvas><br/>
<button onclick="clearImage()">Clear</button>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
if(canvas){var context= canvas.getContext('2d');}
var tool;
tool = new tool_pencil();
document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);
function listen(){
canvas = document.getElementById('canvas');
if(canvas){
context= canvas.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone||ipad){
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchend', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
}
else{
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
}
}
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
//img_update();
}
};
this.touchstart = function (ev) {
ev.preventDefault();
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.touchmove = function (ev) {
ev.preventDefault();
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.touchend = function (ev) {
ev.preventDefault();
if (tool.started) {
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse position relative to the canvas element.
function ev_canvas (ev) {
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if (((iphone)||(ipad))&&(ev.touches[0])){ //iPad
ev._x = ev.touches[0].clientX;
ev._y = ev.touches[0].clientY;
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
function clearImage(){
var yes=confirm('Clear drawing?');
if(yes){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
</script>
</html>