I'm generating a coupon based on dynamic input and a cropped image, and I'm displaying the coupon using ntml and css right now, the problem is, printing this has become an issue because of how backgrounds disappear when printing and other problems, so I think the best solution would be to be able to generate an image based on the html, or set up some kind of template that takes in strings and an image, and generates an image using the image fed in as a background and puts the coupon information on top.
Is there anything that does this already?
This is for an ASP.NET 3.5 C# website!
Thanks in advance.
edit: It'd be great if the output could be based on the HTML input, as the coupon is designed by manipulating the DOM using jQuery and dragging stuff around, it all works fine, it's just when it comes to the printing (to paper) it has z-indexing issues.
What you can do is create an aspx page that changes the response type to be in the format you want and then put the image into the stream. I created a barcode generator that does a similar thing. Excluding all the formalities of generating the image, you'll Page_Load will look something like this:
Bitmap FinalBitmap = new Bitmap();
MemoryStream msStream = new MemoryStream();
strInputParameter == Request.Params("MagicParm").ToString()
// Magic code goes here to generate your bitmap image.
FinalBitmap.Save(msStream, ImageFormat.Png);
Response.Clear();
Response.ContentType = "image/png";
msStream.WriteTo(Response.OutputStream);
if ((FinalBitmap != null)) FinalBitmap.Dispose();
and that's it! Then all you have to do in your image is set the URL to be something like RenderImage.aspx?MagicParm=WooHoo or whatever you need. That way you can have it render whatever you want to specify.
You can render html to a bitmap using the WebBrowser control in either a winforms or console application.
An example of this can be found here: http://www.wincustomize.com/articles.aspx?aid=136426&c=1
The above example can be modified to run in ASP.Net by creating a new STAThread and performing an Application.Run on it to start a new message loop.
PHP/Ruby Alternative
If you have accessed this question and are actually looking for soething that will work without Windows, you can try the KHTML library: http://wiki.goatpr0n.de/projects/khtmld
The website has a ridiculous name I admit, but I can assure you it is genuine. Other related pages are: the sourceforge page http://khtml2png.sourceforge.net/
Try PDFSharp...it's not exactly a "take this HTML and make a PDF" but with a small amout of fiddling you can easily make a PDF out of the info you are using to make the HTML.
MARKUP ONLY ALTERNATE SOLUTION
Use SVG and XSLT to transform the html data into an image that can be rendered/saved/etc.
I'll admit that at first it was tedious getting this to work because of all of the coordinates, but well worth the effort once it is running.
There is a very powerful image creation library called GD which I often use with PHP.
I am led to believe there is a wrapper for this library that ASP programmers can use. Try this
Unless the "other problems" are pretty severe, couldn't you just instruct your users to turn on Background Images when printing?
In any case, I'd default to serving a PDF rather than an image, doubly so since it is intended for print.
Just set up your css properly, so that you have a css file targeted at the print medium. It is pretty easy to guarantee that the coupon will always be legible, without worrying about whether they have bg images on or not. Needlesly moving to an image doesn't make any sense, unless there is some reason you don't want it to be machine readable.
I haven't tried to myself, but you should be able to render HTML into an image by using the WebBrowser control and the DrawToBitmap() method inherited from the base Control class.
UPDATE: I tried this myself and there are some caveats. The WebBrowser control doesn't seem to render the web page until the control is show, so the WebBrowser needs to be in a Form and the Form must be shown for the HTML to be rendered and the DocumentCompleted event to be raised.
Related
I have created a print button in my application that opens a new window that goes to print device layout by appending the current url with QueryString of Print device(?p=1 in my case) and onload it calls window.print() function. But this is useless because all the data user has entered will be lost when it opens a new window containing print device layout of the current page.
I can't think of a way by which I can use the print device layout and pre-populate the page with data user has entered. Can anyone help me with this?
Thanks in advance.
The point of the Print Device to be able to have a different set of Presentation components for display or print. Sometimes it is sufficient (and easier) to just use a print stylesheet, which hides/restyles certain elements: https://stackoverflow.com/a/12773239/19112
Obviously Devices works fine for non-form pages, or forms that have been posted and a confirmation page is shown (no input boxes, just text).
An alternative would be to use Rendering Parameters to set on each control, which could add a .print or .do-not-print class to then be used by the print stylesheet. You would then have to set the appropriate styles in the stylesheet to hide those elements. Note however that you cannot style the iframe content from the parent, you must link a separate stylesheet to the iframe src page if you want to style when printing.
You can append the user inputs to the print URL query string using javascript, for example:
var url = 'Current-Page-URL' + '?p=1' + '&input1=[INPUT1]'+ '&input2=[INPUT2]' etc..
Then in Page load event, you can set these inputs in the corresponding text/dropdown elements
Like mentioned above that device is a different set of presentation that can be used for many purpose. Early years when there weren’t responsive design, I used device to rendering different mobile device. You can use device to render rss feed or anything you want where you want to have different render set.
Another example if you have multi sites and want to rendering them differently you can use device as well.
Sitecore is very flexible that’s why I love it so much. There are always other ways to get same or similar results. From your context I don’t know what you are trying to achieve. If I want to have different set of presentation
here is some approach I will look into, Lavage rendering rules, tap into request pipeline, swap rendering controls in code, on item level specify style sheet…
If you can tell us what you are trying to achieve, I am sure someone will provide you their own solution. Then you will have more options to choose from and get the best fit to your project.
Hope this help.
We print pdf provided by the company and merged it with data from our C# ASP.Net 3.5 Web application using iTextSharp. This works well but we have been asked to either print the form with or without the company logo depending on the user preference.
Should I use a pdf with the logo and hide it or use a pdf without the logo and add the logo to it?
I have found numerous way to add a logo to a pdf but nothing on hiding images. Because the logo could be having different size and be in a different location I would prefer to hide it when needed instead of adding it. Can we hide images from pdf without removing it? What would be easier?
Or should we just use 2 versions of each forms, one with the logo and another without?
UPDATE: In a nutshell I just want to have your opinion to what way would be best. Use a form without a logo and add it when needed or use a form with the logo and hide it when needed. Thanks
FINAL UPDATE: Some people gave good answer but I see no way to accept their answer. Can someone help me?
Because no one answered my question I selected one of the comment as "the" answer. Thanks mkl!
You can store data private to your application in PDFs, e.g. logo size and location in the case at hand (cf. this answer on PieceInfo structures). I would, therefore, recommend that you create the PDFs without the logo but store the size and location for a logo in such a PieceInfo dictionary. If adding a logo is required later-on, use that information to properly place the logo
I am working on an asp.net project. I am searching for a solution such that after a background image of a div is chosen. The user selects another image and coordinate. Then, this image will be merged on the background image with the defined coordinate.
Thanks in advance.
If you wish to combine two images,firstly you must upload them into server via ajax requests.
Read this article : combining images
After you combine them,let the user download the new one.
Also if you're looking for an editor to do so,I suggest to place them on html5 canvas.
Best Regards
Your post is quite general, but look in to System.Drawing and using an AJAX call to post both images (as well as the coordinates chosen) and then return the combined image which can then be displayed.
Without more specifics that's really all I can offer.
Is it possible to edit images using a javascript library and then send the edited image to the server for saving.
Edits will be in real time, means the user can see the edit result in the same time he is editing without the need to refresh the page.
I want a javascript library to do some edits on an image on a webpage 'such as crop, resize, rotate,...' and send send the edited result to the server.
How this can be done or if there any smart work around to something like this.
The libraries mentioned don't seem to be fully cross browser. As far as I know there is no fully cross browser compliant way to edit pixel data on the client.
The current best approach would be to do these manipulations on the server. You can still do this real time using a web service.
As an example see the image editor in TinyMCE which supports crop, rotate, resize, flip, all from the client without a page refresh.
Pixastic is an image manipulation library; once you've modified the image, some sort of post back / upload call from the script will be able to upload the image provided you've implemented the needed functionality to do so.
An incomplete list to be sure, but these are two that come to mind which allow you do a wide variety of editing on the client side and push back to the server.
PIxastic
AIE
And there are numerous less complete image editing tools for simply cropping or adjusting contrast as well.
jcrop is what you are looking for .
I have pre-existing PDF files which I would like to send to a PrintJob in Flex 3. I can load the files fine with UrlRequest, but I need to somehow get the data into a Sprite to be included into a PrintJob.
Is there a way to do this, or should I go another route? (I've seen the hidden iFrame example, but I was hoping for a way to do this without JavaScript.)
Thanks
If you're using Aodbe AIR, then you'll be able to load the PDF into an HTML View.
Flex (and The Flash Player) does not have any native support for displaying (or creatging) PDFs, though.
Most people will just pass the generated PDF to the browser and let it handle it. You can do this w/ navigateToURL. The iFrame trick can work, although the actual display of the PDF may depend upon browser settings.
Here is another StackOverflow Post on a similar topic. It links to this site http://www.devaldi.com/?p=212 which provides one alternative.