Raphael, copy image internally

Question

In Raphael you can load up images in the following manner:

var image_one=paper.image("some_url", x,y,width,height);

But the thing is that I am splicing the image, and I need several of those cuts, preferably without reloading the original image. That is because loading up only a single large image via http is faster than many small. Apparently there is some overhead in each upload that can become quite substantial.

But anyways, how can I make a copy of a Raphael image, after it has been loaded into ram? I have already tried:

var image_two=image_one;

But it seems like that is only creating another link to the image.

Answer 1

This kind of internal copying is done via Raphael's .clone(), which is as simple as this:

var newElem = oldElem.clone();

Element.clone() works on elements including paths, images, rects, circles... but not sets.

---

Here's a simple demo - play around with splicing as desired.

http://jsbin.com/ufayuw/1/edit

If you want the clone to be hidden until it is needed, hide it with .hide()