I have a signature pad in my server when posted the values from server to my phonegap application i get the response like below how to use that response to store into DB and display in my phonegap.
My response after parsing JSON:
[{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}]
in that response how can i get the image path or direct images.
my script for display the image in canvas
var arbeidcanvas = $('#mArbeid')[0];
arbeidcanvas.width = arbeidcanvas.width;
var arbeidsign = arbeidcanvas.getContext("2d");
var arbeidimg = new Image();
arbeidimg.src = **MYDATABASE VALUE**;
arbeidimg.onload = function() {
arbeidsign.drawImage(arbeidimg, 0,0);
}
<div id="result_data"></div>
<canvas id="myCanvas" ></canvas>
<script>
$(document).ready(function(){
var obj = [{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}] ;
if(obj.length >0){
var list = '<ul data-role="listview" >'
$.each(obj, function(key, value){
if(value.searchStr){
list += '<li>searchStr :'+value.searchStr+'</li>';
}
if(value.type)
list += '<li>type :'+value.type+'</li>';
if(value.size)
list += '<li>size :'+value.size+'</li>';
if(value.name)
list += '<li>name :'+value.name+'</li>';
}) ;
list += '</ul>' ;
$("#result_data").append(list).trigger('create');
$("#result_data").listview('refresh');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = your_img_src;
}
});
</script>
Store data in db see this link
1) http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html
var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
var counter = jsonData.counters[i];
console.log(counter.counter_name);
}
Related
Here is my JS code :
UTIF._imgLoaded = function(e)
{
var page = UTIF.decode(e.target.response)[0], rgba = UTIF.toRGBA8(page), w=page.width, h=page.height;
var string = rgba.join();
console.log("rgba : ", rgba);
var ind = UTIF._xhrs.indexOf(e.target), img = UTIF._imgs[ind];
UTIF._xhrs.splice(ind,1); UTIF._imgs.splice(ind,1);
var cnv = document.createElement("canvas"); cnv.width=w; cnv.height=h;
var ctx = cnv.getContext("2d"), imgd = ctx.createImageData(w,h);
for(var i=0; i<rgba.length; i++) imgd.data[i]=rgba[i]; ctx.putImageData(imgd,0,0);
var attr = ["style","class","id"];
for(var i=0; i<attr.length; i++) cnv.setAttribute(attr[i], img.getAttribute(attr[i]));
img.parentNode.replaceChild(cnv,img);
document.getElementById("myText").innerHTML = string;
}
I get a Uint8Array() RGBA of image, here is console.log of this :
Here is image with rgba array as a string in HTML:
Is that possible to manipulate this array, to ex. change colors? Thanks for help!
After uploading images, what I want is I want to display that image. It is working properly when the image is of .jpg extension. But when I upload pdf files its gets uploaded but it is not displaying the file.
JQUERY
function setImagesSitePlot(JsonObject) {
for (i = 0; i < JsonObject.length; i++) {
var obj = JsonObject[i].Filename;
var obj2 = "ImgSitePlotManual";
var obj3 = JsonObject[i].FileType;
var dataImageName = JsonObject[i].ImageName;
var ImgObj = parent.document.getElementById(obj2);
ImgObj.src = SharedFilePath + obj;
$(ImgObj).attr("data-imagename", dataImageName);
}
}
HTML
<img width="500" class="img-responsive" id="ImgSitePlotManual" data-imagename="" style="width: 606px;" />
You either have to use an image representing the pdf file icon that you return in your JSON string once the uploaded file is pdf.
Or you can display the pdf file in an object element:
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px' id='PdfSitePlotManual'>
You cannot view pdf in an image.
Make use of the fileType property you are already returning:
for (i = 0; i < JsonObject.length; i++) {
var obj = JsonObject[i].Filename;
var obj3 = JsonObject[i].FileType;
var dataImageName = JsonObject[i].ImageName;
if(obj3 == 'img')
{
var ImgObj = parent.document.getElementById("ImgSitePlotManual");
ImgObj.src = SharedFilePath + obj;
$(ImgObj).attr("data-imagename", dataImageName);
}
else if(obj3 == 'pdf')
{
var PdfObj = parent.document.getElementById("PdfSitePlotManual");
PdfObj.setAttribute('data', SharedFilePath + obj);
}
}
In one function I have a loop that creates 10 images using the createElement();. In the other function I have another loop that contains info that I need to add text after each picture but my code adds it at the end of all 10 pictures I need them to be after every corresponding picture.
This is the function that displays the text:
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
display.appendChild(span1);
}
}
I cant individually set the id of each image because i created them in js. Thanks for the help in advance and no jquery please
for (var x = 0; x<json.length;x++){
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
display.appendChild(image);
var a = document.getElementById("artist");
var y = document.getElementById("year");
var artist = document.getElementById("artist").selectedIndex;//index of value of the switch statement
var year = document.getElementById("year").selectedIndex;//index of value of the switch statement
var realYear = y[year].text;//Value of the selected text
var realArtist = a[artist].text;//Value of the selected text
var display = document.getElementById("Results");
}
This is my second loop. I want displayalbum to appear after every picture. I cannot combine them because of other complications in the code
Try to do something like that: plunker
function displayAlbum(){
for (var x = 0; x < 10 ; x++){ // change to json.length
var span1 = document.createElement("span");
span1.innerText = 'json[x].album';
span1.id = 'span'+x;
var display = document.getElementById("results");
display.appendChild(span1);
}
}
The loop where you are creating images, give a unique id to image like image.id = "picture" + x;
Then change displayAlbum() function to use corresponding image to place the span tag.
function displayAlbum(json){
for (var x = 0; x<json.length;x++){
var span1 = document.createElement("span");
span1.innerText = json[x].album;
console.log(json[x].album);
var display = document.getElementById("results");
var img = document.getElementById("picture" + x); // use unique id of img to access it
if(img.nextSibling) { // if img is not the last node in 'results'
display.insertBefore(span1, img.nextSibling);
} else { // if img is the last node in 'results'
display.appendChild(span1);
}
}
}
You can achieve your goal with single loop and using Figure and FigCaption element , specifically created for this kind of display image with its description
var json = [{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test1"},{cover:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Internet2.jpg/440px-Internet2.jpg", album:"test2"}];
for (var x = 0; x<json.length;x++){
var fig = document.createElement("figure");
var figCap = document.createElement("figcaption");
figCap.innerText = json[x].album;
var image = document.createElement("img");
image.id = "picture";
image.width = 100;
image.height = 100;
image.src = json[x].cover;
var display = document.getElementById("results");
fig.appendChild(image);
fig.appendChild(figCap);
display.appendChild(fig);
}
<div id="results">
</div>
I'm using the following code to display to parse an RSS feed via Javascript and Google Feed API into HTML. Is it possible to grab an image from the RSS feed? It is working fine fro the title, snippet, date and link. I just need the URL for the image as well.
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var publishedDate = entries[i]. publishedDate;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var mediaGroup = entries[i].mediaGroup;
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
var text = document.createTextNode(publishedDate);
link.appendChild(text);
var text = document.createTextNode(mediaGroup);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
<div class="post_results" id="post_results2" rss_num="2" rss_url="http://www.feed.com/feed">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
I was able to pull the content (which houses the image tag) with: var
content = entries[i].content;
And parse that to get just the image using this:
var input = content;
var div = document.createElement('div');
div.innerHTML = input;
var img = div.getElementsByTagName('img')[0];
with ajax i get an array of pictures URL and then I need to create from them the gallery. I also need to make a counter that shows the number of downloaded images, it looks like this:
var images;
var load_image = new Image();
load_image.onload = function(){
myPhotoSwipe.show(0);
}
$.each(images['images'], function(key, value) {
load_image.src = ('index.php?load_image=' + value);
$('#image_count').remove();
$('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
images+= '<li><img src="index.php?load_image='+value+'" /></li>';
});
The problem is that the counter is always loaded at penultimate element and stay there until all images are loaded, but I need to show the load of each like a progress.
P.S.
I also tried complete, but it didn't help.
This should fix it. The reason is because the load handler was being bound to only 1 image object.
var images;
$.each(images['images'], function(key, value) {
var load_image = new Image();
load_image.src = ('index.php?load_image=' + value);
$('#image_count').remove();
$('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
images+= '<li><img src="index.php?load_image='+value+'" /></li>';
load_image.onload = function(){
myPhotoSwipe.show(0);
}
});
You are almost there.
The problem is that you are re-using the same image object. You need to create an array of load_image instances and increment your counter inside onload, when each of them returns.
function load(){
var imageUrls = [];
imageUrls.push('http://www.nasa.gov/images/content/690106main_iss033e005644_full.jpg');
imageUrls.push('http://www.nasa.gov/images/content/690669main_201209210010_full.jpg');
imageUrls.push('http://www.nasa.gov/images/content/691806main_hs3_full_full.jpg');
imageUrls.push('http://www.nasa.gov/images/content/689231main_Webb_Mirror_Cans_orig_full.jpg');
var images = [];
var i;
var counter = 0;
var mainDiv = document.getElementById('somediv');
var counterDiv = document.getElementById('counter');
for (i = 0; i < imageUrls.length; i++)
{
images[i] = new Image();
images[i].width = 100;
images[i].height = 100;
images[i].onload = function () {
counter++;
counterDiv.innerText = counter;
}
mainDiv.appendChild(images[i]);
images[i].src = imageUrls[i];
}
}