PHP / Javascript / HTML5 canvas - loading external images

Question

Ok, so I want:

I have everything that works with local images, however trying to import external images into the canvas creates a security error.

Using PHP, I can create a copy of the external file locally:

file_put_contents("copy.jpg", file_get_contents("http://external.com/image.jpg"));

The problem is that external images can be quite large - up to 3MB and the canvas will be imported before the image is loaded.

Is there any PHP or Javascript code that waits until the file is fully loaded?

Or is there a better way to do this?

+3

Lee 23 Apr 15 at 14:06

3 answers

meda · Answer 1 · 2015-04-23T14:11:05+0000

You can use jQuery.ajax () and on the sucess callback you control the canvas

Tommy jinks · Answer 2 · 2015-04-23T14:12:36+0000

If you want to wait for the entire file to load:

document.onload = function(){ //load image };

If you want to wait for your canvas to load:

canvas.onload = function(){ //load image };

This is the easiest way. However, if you want more efficient results, I recommend using jQuery.

Jijo john · Answer 3 · 2015-04-23T15:03:36+0000

Take external image using ajax. Manipulate the canvas inside the success callback, or use another callback function. Here's a demo code

 $.ajax({

 success: function(success) {

 process(success);

 }

});

var process = function(input){

// manipulate the canvas here

}