save/restore screen area

MartinRinehart · Oct 22, 2008

I'm making a slider widget with a <canvas>.

First I draw the background. I'd like to save this drawing. Something
like:
slider.drawBackground();
slider.back = new ScreenArea( left, top, width, height );

Next, draw the pointer. When the user slides the slider, I'd like to
restore the saved background and then redraw the pointer. Any way of
doing this directly? Something like:
slider.back.restore();
slider.drawPointer();

I've been playing with indirection: using context.toDataURL() (after
drawing the background) but I haven't found a way to take that string
and use it to construct an Image object. What I want is:
slider.back = new Image( context.toDataURL() ); // in my dreams!

Or maybe:
slider.back = new Image( wid, hgt );
slider.back.src = context.toDataURL(); // still dreaming

David Mark · Oct 22, 2008

I'm making a slider widget with a <canvas>.

Why?

Jorge · Oct 23, 2008

(...)
I've been playing with indirection: using context.toDataURL() (after
drawing the background) but I haven't found a way to take that string
and use it to construct an Image object. What I want is:
slider.back = new Image( context.toDataURL() ); // in my dreams!

Or maybe:
slider.back = new Image( wid, hgt );
slider.back.src = context.toDataURL(); // still dreaming

var img= document.createElement('img');
img.src= context.toDataURL();

MartinRinehart · Oct 23, 2008

David said:
Why?

Because I need a slider for my color chooser which I'm writing after
asking my very smart friend Mr. Google about JS color choosers. He led
me to many. But when I said "I want to be able to pick a color by
clicking in a color wash, by supplying RGB values, by entering hex or
by picking from a palette of recent choices, Mr. Google told me I was
on my own.

MartinRinehart · Oct 23, 2008

Jorge said:
var img= document.createElement('img');
img.src= context.toDataURL();

Thank you!

Any reason why this works but 'new Image()' doesn't?

Jorge · Oct 23, 2008

Thank you!

Any reason why this works but 'new Image()' doesn't?

No idea. I didn't know that new Image() existed. What other tags have
a constructor ?

MartinRinehart · Oct 23, 2008

Still not working. Here I've got a second 'test' canvas. Attempt to
save image and redraw in the test area. Code:

var img = document.createElement( 'img' );
img.src = slider.canvas.toDataURL( 'image/png' );
alert( img.src.length )
var t = document.getElementById( 'test' );
var pen2 = t.getContext( '2d' );
pen2.drawImage( img, 0, 0 );

This is called after painting the background from <body> onload(). The
alert() gives different results (from a low around 250 to a high over
10,000).

P.S. WORKING! I have no clue why. Trivial change, looks functionally
identical.

var img = document.createElement( 'img' );
var str = slider.canvas.toDataURL( 'image/png' );
alert( str.length )
img.src = str;
var t = document.getElementById( 'test' );
var pen2 = t.getContext( '2d' );
pen2.drawImage( img, 0, 0 );

The alert gives different results, but in the 300 to 315 range.

MartinRinehart · Oct 23, 2008

Jorge said:
No idea. I didn't know that new Image() existed. What other tags have
a constructor ?

Since 'document.createElement()' works and 'new Image()' doesn't, I'm
going to pretend the former is the real constructor.

sasuke · Oct 24, 2008

Since 'document.createElement()' works and 'new Image()' doesn't, I'm
going to pretend the former is the real constructor.

document.createElement('img') way of creating an image object is a
part of the DOM specification; new Image() isn't. The valid
invocations of the Image constructor are:
var i = new Image();
i.src = 'images/ah.png';

var i = new Image(250 /*width*/, 250 /*height*/);
i.src = 'images/ah.png';

/sasuke

I need help installing pypng in Python 3.3	9	Oct 29, 2012
PIL\Tkinter and Transparencies, Rubber Lines, and Dragging ImageObjects	1	Apr 7, 2009
GDI+ and SAVE JPG or BMP on the server	3	Mar 19, 2006
Thank you, Tkinter. (easy to use)	6	Feb 12, 2009
[PyOpenGL] How do I save runtime on drawing HUGE polylines (120 000vertices)?	2	Jun 11, 2004
ImageIO/BufferedImage behaving inconsistently from one day to thenext.	11	Jun 20, 2012
comp.lang.java.gui FAQ	0	Sep 13, 2006
setting the fg/bg color of a 1 bit image	0	Sep 5, 2003

save/restore screen area

MartinRinehart

David Mark

Jorge

MartinRinehart

MartinRinehart

Jorge

MartinRinehart

MartinRinehart

sasuke

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads