Ajax Response Image Element Onto Canvas

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

Solution 1:

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 = newImage();//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!

Solution 2:

functionafter_success(data){
    $('#hiddendiv').html(data);
    var img=newImage();

    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.