Display Image using canvas in Javascript/Jquery

Question

I have the following code :

function createImage(source) {                
var pastedImage = new Image();                
pastedImage.onload = function() {                                        
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');                                                                                                         
}
pastedImage.src = source;                
}

Here I am displaying the image through html image tag which I wrote in document.write and provide appropriate height and width to image.

My question is can it possible to displaying image into the canvas instead of html img tag. So that I can drag and crop that image as I want.

But how can I display it in canvas?

Further I want to implement save that image using PHP but for now let me know about previous issue.

Thanks in advance.

Answer 1

Use CanvasRenderingContext2D.drawImage .

function createImage(source) {                
  var ctx = document.getElementById('canvas').getContext('2d');
  var pastedImage = new Image();
  pastedImage.onload = function(){
    ctx.drawImage(pastedImage, 0, 0);
  };
  pastedImage = source;
}

Also MDN seems to be have nice examples .

Answer 2

Try This

 var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image();   // Create new img element  
    img.onload = function(){  
      // execute drawImage statements here  This is essential as it waits till image is loaded before drawing it.
 ctx.drawImage(img , 0, 0);

    };  
    img.src = 'myImage.png'; // Set source path  

Make sure the image is hosted in same domain as your site. Read this for Javascript Security Restrictions Same Origin Policy .

Eg If your site is http://example.com/ then the Image should be hosted on http://example.com/../myImage.png

if you try http://facebook.com/..image/ or something then it will throw security error.