CODEWITHSUNDEEP
javascriptjqueryhtmlajaxcanvas
Tilak Raj
Tilak Raj

Reputation: 1499

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 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.

Upvotes: 1

Views: 1812

Answers (2)

Tilak Raj
Tilak Raj

Reputation: 1499

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.

Upvotes: 0

Anubhab
Anubhab

Reputation: 741

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!

Upvotes: 1

Related Questions