[RESOLVED] restricting wysiwyg dimensions for printing

clairence

I have a client who wants to enable visitors to create their own designs/text on the client's website, to be printed on a 3" by 3" space that the client shares with the visitors.

I was considering using an upload script for an image, then importing it into ckeditor or somesuch. But I don't see how I can a)insure the layout will remain intact and b)accurately convert the screen view to a printout.

I'm also thinking of things like wordpress, which has a selection rectangle that users can drag around a large image that shows how big the end result will be - and allows users to select which part of the image will be kept. But ideally the users won't be required to make that kind of decision.

Any thoughts appreciated.

clairence

actually, I was thinking if there's a photo program (like paint.net) that is embeddable, and adjustable so I can limit the final output size, that would be ideal.

does such a thing exist?

clairence

Okay, so I guess I'm looking for an embeddable photo editor.

Putting THAT into a search engine returns a ton of options.

Are there any that folks might recommend, from experience.

Any that might fit the criteria I mentioned?

Thanks.

sneakyimp

It's hard to tell from your posts what exactly you are trying to offer. If you want to let clients upload an image, you can enforce the size of the image before they upload it -- image editors are available on most platforms which are much more full-featured than any browser-based option you'll find -- and it's a lot easier on your server.

For your server, you should probably enforce the image size (and make sure any uploaded files are in fact images). This is not particularly difficult.

Perhaps you could clarify?

clairence

Sorry for not being clearer. The end product is basically a gift label, which can have an image and/or text. The contents of the label are entirely up to the site visitor.

So I'm looking for something that allows a)image upload, b)image editing, c)text composition, d)layout control.
I did more searching and found three items that seem to fit the bill. But I've yet to do any experimenting with them.

aviary.com
pixlr.com
picmeleo.com

What my biggest concern is, however, is how screen displays are not equivalent to printouts. I want to know if there's a way to ensure that a design my visitor can see and read legibly doesn't become a series tiny black lines, or just a couple of huge letters, when printed.

Now that I see there are at least three ways to get a visitor design to me, is there a way to automatically adjust the design from screen to print without loss of fidelity?

sneakyimp

a) Image upload will minimally require cooperation between a browser and scripts on your server. Minimally, you'll need an upload form.

b) Offering image editing is much more involved. I haven't seen those 3 items before and therefore cannot comment on them. Let's hope they offer the image editing capabilities you want because writing it all yourself is time-consuming.

c) text composition is tricky for a variety of reasons. one is that you would need to integrate this with the image editing that you hope to obtain from these third-party image editors. another reason is that you have no idea what fonts are installed on someone's browser. you'll either need to i) limit font selection, ii) use something like Flash with embedded fonts, iii) look into embedding fonts in html (i know nothing about this) or iv) set up your image editor to enable text composition.

d) for layout control you either set up templates they can choose from or you offer drag and drop (and stretch and move) functionality.

I once wrote a flash application that allowed the addition of images and text (in a variety of fonts) to a canvas which could be saved. It was pretty involved, but not impossible. It did not offer any image editing capabilities.

As for printing these objects and having them come out the size you want, this depends on how you handle the data/images from your server to the printer. For instance, printing in a browser can result in the browser scaling an image to fit on a single sheet. Printing with photoshop, on the other hand, lets you specify whether to scale the image to fit or not. Printing directly from HTML might work if you specify your dimensions in pixels and set your CSS overflow options to prevent things from getting too large. I would imagine the whole trick in avoiding giant or tiny text output is to give the user an accurate representation of what it is they are going to print. If they upload a tiny image, it should look tiny in your preview. If they upload a huge image, it should clear that the image exceeds the printable area.

cretaceous

output to pdf and print that..?
that fixes browser scaling and page dimension issues at least

sneakyimp

cretaceous;10994013 wrote:
output to pdf and print that..?
that fixes browser scaling and page dimension issues at least

Or does it? I imagine it would ultimately also depend on the printer driver, no?

EDIT: I do think it sounds like a reasonably good idea. fpdf can be used in PHP to create PDF files.

clairence

I hadn't considered pdf. That's a very good idea. Thanks. I'll have a go at that.

sneakyimp, thanks for all your helpful thoughts as well.

cretaceous

Printing from PDF is more predictable than printing from html that's for sure.

But I guess assembling something in html and expecting reliable ouput to paper print out has a lot of unpredictables.
At least conversion to PDF would provide the end user with a proof, so the html could be tweaked till PDF looked right.
That's why commercial print shops ask to be supplied with a PDF (or eps or file from professional page layout software)