4 ms·

This is actually brilliant. Is wrapping a web rendering engine and exporting the web page as a PSD file the next step?

by yan 18y ago

andr 18y ago
I'm thinking it would be the easiest to do this via DOM manipulation. Sequentially set visibility: hidden to all elements except one, take screenshot, continue on to the next one. Not the most elegant solution, but it's quick and you don't need to understand WebKit or Gecko's source.
- trapper 18y ago
  That would be seriously cool. Imagine one-click then rearranging a site on the fly.
  - tlrobinson 18y ago
    I wrote a bookmarklet that would capture all mouse events and let you rearrange elements on the page... I'll see if I can find it. edit: I can't seem to find it at the moment, but it was fairly simple. Intercept all mouse events, determine the clicked element, record the initial position, start dragging, etc. I think it did some fanciness for non-absolutely positioned or non-block elements too.
picnichouse 18y ago
I agree - not a lot of utility in this (for me at least), but I'd pay $100 for something that did this for webpages.
- fizx 18y ago
  why?
  - kajecounterhack 18y ago
    Take/learn from designs. Though theoretically it could be used to steal designs also... I mean that already happens today but it'd be easier.
- tholder 18y ago
  is the ScreenGrab! Firefox extension no good?
  - showerst 18y ago
    The difference between this and various screen shot addons is that it outputs each piece as a photoshop layer, so they can be easily hidden/moved around. If you take a screen shot then load it into photoshop and move around a window, you'll get a big white box where the window was, because the screenshot app didn't record any information 'underneath' the window.
showerst 18y ago
I just spent a few hours looking into doing this, and all I can say is kudos to them for decoding the psd file format =P. None of the big graphics libraries (GD, Image Magick, etc) support writing of layered PSD files (Imagick can read them, and export non-layered's, but that's it as far as I can tell.), and the format specs require you to sign an NDA/non-compete with Adobe. Taking the screenshots is doable if a bit of a pain, but short of reverse engineering the psd format, the second part seems to be a roadblock. Shame, i'd use this too =P.
- asjo 18y ago
  The Gimp (http://gimp.org/ http://gimp.org/) can load _and_ save PSD-files with layers, so you could probably find most of the reverse engineering already done in the code there. While you are at it, why not just save the file in Gimp format and be done with it? :-)

This is actually brilliant. Is wrapping a web rendering engine and exporting the web page as a PSD file the next step?

by yan 18y ago

This is actually brilliant. Is wrapping a web rendering engine and exporting the web page as a PSD file the next step?

andr 18y ago

I'm thinking it would be the easiest to do this via DOM manipulation. Sequentially set visibility: hidden to all elements except one, take screenshot, continue on to the next one. Not the most elegant solution, but it's quick and you don't need to understand WebKit or Gecko's source.

trapper 18y ago
That would be seriously cool. Imagine one-click then rearranging a site on the fly.
- tlrobinson 18y ago
  I wrote a bookmarklet that would capture all mouse events and let you rearrange elements on the page... I'll see if I can find it. edit: I can't seem to find it at the moment, but it was fairly simple. Intercept all mouse events, determine the clicked element, record the initial position, start dragging, etc. I think it did some fanciness for non-absolutely positioned or non-block elements too.

picnichouse 18y ago

I agree - not a lot of utility in this (for me at least), but I'd pay $100 for something that did this for webpages.

fizx 18y ago
why?
- kajecounterhack 18y ago
  Take/learn from designs. Though theoretically it could be used to steal designs also... I mean that already happens today but it'd be easier.
tholder 18y ago
is the ScreenGrab! Firefox extension no good?
- showerst 18y ago
  The difference between this and various screen shot addons is that it outputs each piece as a photoshop layer, so they can be easily hidden/moved around. If you take a screen shot then load it into photoshop and move around a window, you'll get a big white box where the window was, because the screenshot app didn't record any information 'underneath' the window.

showerst 18y ago

I just spent a few hours looking into doing this, and all I can say is kudos to them for decoding the psd file format =P. None of the big graphics libraries (GD, Image Magick, etc) support writing of layered PSD files (Imagick can read them, and export non-layered's, but that's it as far as I can tell.), and the format specs require you to sign an NDA/non-compete with Adobe. Taking the screenshots is doable if a bit of a pain, but short of reverse engineering the psd format, the second part seems to be a roadblock. Shame, i'd use this too =P.

asjo 18y ago
The Gimp (http://gimp.org/ http://gimp.org/) can load _and_ save PSD-files with layers, so you could probably find most of the reverse engineering already done in the code there. While you are at it, why not just save the file in Gimp format and be done with it? :-)