Show HN: Screenshot.Rocks: Open-source browser and mobile screenshot mockup tool | Hacker News Reader

Show HN: Screenshot.Rocks: Open-source browser and mobile screenshot mockup tool

screenshot.rocks

91 pointsdignite28 comments

Simple and clean, well done. The tilt options are a nice touch.

A few suggestions:

- Add example(s) on the home page. This is the first thing I look for, it took me a few seconds before I noticed "Try a demo image".

- In the case of a mobile screenshot, if the image is horizontal then the camera location on the "fake" phone should be moved to the side. Currently the camera remains on top, making the phone look more like a laptop screen.

- Add a button to reset the value for each individual property (size, space, tilt...etc).

- For some reason when switching from "Browser" to "Mobile" mockups the canvas shrinks to a small size. I'm using Chrome.

Good suggestions, thanks!

It would be great to be able to navigate the page to a certain scroll location or a specific state if it's a single page app and THEN take a screenshot. I don't know how you would achieve that though. Easier for the user to upload an image.

Thanks for the suggestion! That would be tricky to automate alright. The browser extension allows you to capture any part of the page, which is the next best thing: https://chrome.google.com/webstore/detail/screenshotrocks-on...

or Firefox: https://addons.mozilla.org/en-US/firefox/addon/one-click-des...

Suggestion: add a toggle for dark-mode, for websites that use it.

That's a great idea, thanks!

Not working on iOS Safari or OSX Safari. Working on Chrome.

Thanks for the heads up! that should be fixed now (after a hard refresh)

Still seeing the issue here. Forced a reload without cache.

> TypeError: null is not an object (evaluating 'e.link')

Suggestions:

The demo image doesn't look great on the phone frame. Not sure what to do. Perhaps you could have a toggle for cropping the image and a setting for aspect ratio, that would be set by default when using the demo image?

Also, for people working on iOS apps it might be useful to have a vaguely iPhone-like shape available as well.

Suggestion: If you type in a URL without http:// or https:// at the beginning it doesn't work. Can this be fixed?

Yes! that can and will be fixed tomorrow :)

I tested my website and the Chinese in the page became garbled. Not for advertising, test https://seazhang.com if you need a case

I have build something similar a while ago https://frameshift.netlify.app

This is cool! Posting to say thanks. I tried it with a screenshot that I had saved from Firefox's built-in screenshot tool.

Awesome site....simple and intuitive yet powerful

Great product! I tested it out on Safari, but the downloaded image only showed the browser frame and not the screenshot itself.

The phone version does not show a mobile view but other than that well done. I used your browser extension.

When uploading (drag&drop or choose file) an image, jpg is not recognized, only jpeg and png.

Just fixed! https://github.com/daveearley/screenshot.rocks/pull/59 - Thanks for letting me know

Paste(CTRL-V) does not work on Firefox, Edge or Chrome for me. Am I missing something? Thanks.

Drag & drop not working on Brave.

This should be fixed now

Empty page, is it running?

That's odd. It's definitely up on my end. Maybe something preventing the JS running?

It is a blank page on Safari. Working on chrome and Firefox.

Really cool app.

That should be fixed now after a hard refresh. Thanks for the heads up!

I would strongly recommend you use the tool to generate a screenshot of the tool and put that on the homepage :)

Reply on news.ycombinator.com