Ajax response image element onto Canvas - javascript

I have an upload photo button on my website which uploads jpeg and png format files on the database.As well as it shows the photo on the website after successful completion.
After successful completion, ajax success calls the after_success function which has the response data as its parameter.
Function Looks like this:
function after_success(data){
}
Response Data Looks like:
<img src="uploads/56dda66be0181.png">
Whatever image comes up from this response I was trying to draw it on the canvas.
My Solution:
var canv=document.getElementById("output");
var ctx=canv.getContext("2d");
var canimg=($('img',data));
ctx.drawImage(canimg,10,10);
But this didn't seem to work.How do i get the image on this canvas element?
Note:
Using Div element and jquery .html() it does show the image inside the Div element.

Ok, if I understand correctly, from response of an upload you'll get an image tag, you want to draw the same image on to a canvas with the id output.
Breaking down -
1. you gave to get the image url from the src of the img tag you are getting as response.
2. You have to draw it on to output
var after_success = function(data){
$('.someHiddenDiv').append(data);//append the response data to some div which is invisible. This is just to get jQuery to access the element as dom.
var img = new Image();//well initialize a new image
//on load of the image draw it on to canvas
img.onload = function(){
var canvas = document.getElementById('output');
var ctx = canvas.getContext('2d');
ctx.drawImage(img,10,10);//same as what you have done
};
img.src = $('.someHiddenDiv').find('img').attr('src');//get source from the image tag
}
This should work!

function after_success(data){
$('#hiddendiv').html(data);
var img=new Image();
img.src=$('#hiddendiv').find('img').attr('src');
$('#hiddendiv').hide();
var canv=document.getElementById("output");
var ctx=canv.getContext("2d");
img.onload= function () {
ctx.drawImage(img,10,10);
}
This is what i did to achieve the same.Thanks to #anubhab.Gave me a fair Idea as to how to do this.Just tweaked his code a bit.

Related

Replace img src but have loading graphic display while image is downloading

I have a page that swaps some fairly large images in and out. There are too many to preload when the page initially loads so that is not an option. So what I need to do is load them as they are requested by the user. Right now I'm using jQuery to replace the img's src. This works fine but the images I am loading can be around 500KB and it looks bad as they paint down the screen as they are downloading. What I'd like to do is pop a loading gif on the page when the image is in the process of loading then have the loading gif disappear once the image is loaded. I'm struggling to find a way to do that though. Here is the JS/jQuery code that I have that just replaces the src.
var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example
$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);
I made a working jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
I recently needed to do the same thing. Basically I wrapped the image in a container div. within the container I've added a span element with my ajax loader gif embedded. this span has to be hidden initially but gets visible when an ajax request is made. The span gets removed when the image is fully loaded.
before ajax call
$('#your_image_container').find('span').show();
on success
$('#your_image').attr('src', 'your/image/url').load(function() {
$('#your_image_container').find('span').fadeOut();
});
I made a jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
Preload the image.
var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
imgEl.attr("src", "/img/loading.gif");
},50);
// preload image
var img = new Image();
img.onload = function() {
clearTimeout(timer);
imgEl.attr("src",imageSrc);
}
img.src = imageSrc;
$img.attr("src", newImage);
if (!$img.get(0).complete) {
$img
.hide()
.after("<img src=throbber>")
.on("load", function () {
$(this).show().next().remove();
});
}

Phonegap: How to save a HTML5 canvas as image to device photo gallery/library

Hey I am developing an app that could tag an image with the geolocation and the time stamp, using Phonegap. I have been able to tag the image by editing the image as a canvas. Now I need to save that edited image to the device Photo gallery/library as a new image or replace the image selected to be tagged. The purpose of using phonegap is that the application must function cross-platform. Is there any way this could be achieved ?
The following code edit the image as canvas and converts the image back to a Data URI.
var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj,0,0,300,300 );
context.fillStyle="#FFFFFF";
context.fillText('Latitude: '+ lat.toString()+' Longitude: '+ lon.toString(), 0, 10);
context.fillText(new Date(), 0, 20);
};
imageObj.src=imageURI;
dataURI= canvas.toDataURL();
Can this be converted to an image object and saved to phone gallery???
https://github.com/devgeeks/Canvas2ImagePlugin apparently does what you want, although I've not tried it.
I don't think you can make the image save in the gallery using just JavaScript but you can send the user to the image or display the image where the user can manually save it.
Maybe you could try the plugin I wrote for IOS (If you want to save a canvas element to photogallery, you could get the dataURI of the canvas the use the downloadWithUrl method below). Hope it works for you.
here is the git link: https://github.com/Nomia/ImgDownloader
Short Example:
document.addEventListener("deviceready",onDeviceReady);
//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';
onDeviceReady = function(){
cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
alert("success");
},function(){
alert("error");
});
}
//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
you can also save a local file to image gallery use the download method

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?
Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

HTML 5/ Javascript canvas Loading image error

I am trying to load an image inside a function, but the image is not showing on the screen. There are no console errors so i don't know why it will not work.
Code:
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var score = 0;
var menuImg = new Image();
menuImg.src = "images/Startscreen.png";
gamemenu();
//The menu screen
function gamemenu(){
ctx.drawImage(menuImg,0,0);
}
The image should draw when the function is called but it does not, any help?
Loading an image is an asynchronous process so you need to add an event handler for the "load" event.
menuImg = new Image();
menuImg.addEventListener("load", function () {
gamemenu();
}, false);
I deal with this on a regular basis in my projects since we make heavy use of canvas and sprite rendering.
Update: Here's MDN's page about this topic.

How to get the true image height using JQuery?

I want to load html , and then get the true image height.
$("#cover").html(stuff); //this has the image inside it
$(function(){
console.log($("#cover img").height()); //sometimes it's 0
});
For some reason, height is sometimes 0. Could it be because the image hasn't been fully loaded yet, and JQuery sees it as 0? If so, how do I overcome this? Is there a callback or something when the image is loaded?
You can use the .load() method of jQuery
$('#cover').html(stuff);
$('#cover img').load(function () {
console.log($(this).height());
};
Why do the console.log inside an anonymous function? Have you tried this?
$("#cover").html(stuff); //this has the image inside it
console.log($("#cover img").height());
//locate the image(s)
$("#cover img").each(function(){
//Build a new Image Object outside the DOM
//that way, CSS won't affect it
var img = new Image();
//add a callback when loaded
img.onload = function(){
//your width and height
//img.width
//img.height
}
//use the image src to load
//use attr() to resolve path issues across browsers
img.src = $(this).attr('src');
});
try to using load method method that we can take advantage of to make this work the way we want it too.
The problem we have right now is that, in the Webkit browsers, the jQuery code runs when the DOM is ready and the DOM is ready before the image has been loaded. So the code runs but since there’s no image to get a width of, we get 0 for the image’s width. We can use the load method to make the code wait until the window has loaded entirely before it runs.
$(window).load(function() {
console.log($("#cover img").height());
});
try using attr() to get the height:-
$("#yourElemengtID").attr('height')
Here is a piece of small code i used before hope this will help you
On my displayed image when mouse is in call this function
function MouseIn()
{
var src;
//to get original image size
var img =$(this);// displayed image
var theImage = new Image();// create a cache image
var imgsource =img.attr("src");// take the src of displayed image
theImage.src = imgsource;// give cached image the source of displayed image
var original_height = theImage.height// take height of image from the source
var original_width = theImage.width;//take width of image from the source
// to get the displayed image size
var Image_displaysize_width= img.width();
var Image_displaysize_height= img.height();
}
Don't you mean to do something like this?
jQuery("#myImg")[0].naturalHeight
better still don't use overhead of jQuery when possible.
document.getElementById('myImg').naturalHeight

Categories

Resources