You can refer to the web-to-print solution based on AJAX Vector Objects, Customer's Canvas. You can consider it as a ready-to-use editor that you may want to embed into your website or as an example demonstrating how AJAX Vector Objects can be used for your needs.
After you finish customizing a design on Canvas, you may need to save it for further editing or render to the print-ready version. AJAX Vector Objects supports both of these scenarios. This topic also considers usage of color management for avoiding color distortion when preparing print-ready output, especially in case of CMYK format.
Both saving the design state to the file and rendering the design to the print-ready version require the involvement of the server side. Therefore, the first thing we need to do is synchronize the Canvas state between the client and server sides.
In the Your First Application with AJAX Vector Objects topic we dealt with transferring the Canvas state to the server side via postback. Just to recap, you need to add an ASP.NET button to the page with CanvasViewer and a user should then click this button after they finish editing the design. The page sends a postback to the server where the server CanvasViewer control is populated with the design the user created in the web browser.
However, what if you do not want to reload the entire page from the server? There are a number of options to send the Canvas state to the server such as AJAX requests, websockets, etc. For example, if you design an APS.NET web application, the following snippet helps you to send an AJAX request after clicking the Finish button using JQuery:
<p><input id="Finish" type="button" style="width: 110px" value="Finish" /></p>
<script type="text/javascript">
$(document).ready(function () {
$('#Finish').click(function () {
$.ajax({
url: "api/rendering",
type: "POST",
data: JSON.stringify({ canvasData: $find("<%= CanvasViewer1.ClientID %>").get_canvas().get_data() }),
contentType: "application/json",
dataType: "json"
})
})
})
</script>
The snippet initiates an AJAX POST request with the serialized Canvas state to the server script. Serialized data is a string stored in the Canvas.Data property representing the Canvas state. Canvas.Data allows you to load the state instantly, for example, when you receive it on the server side. You just create a Canvas instance and copy the received data to the Canvas.Data property. After that, you will get the same Canvas as on the client side.
Canvas is a visual control, and it takes time to create the visual part, which is actually not needed for saving the state to the disk or rendering the print-ready output. Thus, AJAX Vector Objects provides the CanvasSlim class representing the same object model but without the visual part. The class is specially designed for saving and rendering the state as fast as possible with a minimal memory footprint.
The following snippet illustrates how to receive the AJAX request from the snippet above, and copy the Canvas state to the instance of the CanvasSlim class:
public void Post(dynamic data)
{
var canvasCopy = new CanvasSlim();
canvasCopy.Data = (string)data["canvasData"];
}
While working on a design, you may need to save it and continue customizations in the future. AJAX Vector Objects allows you to do this via the Canvas.Serialize(Stream) method. It returns the Canvas content serialized in SVG format, which keeps all the information about the design and which can be reloaded later to Canvas. The following snippet shows how to serialize Canvas:
System.IO.FileStream serializedCanvas = new System.IO.FileStream(HostingEnvironment.MapPath(
"~/" + "SerializedCanvas.vobj"), System.IO.FileMode.Create, System.IO.FileAccess.Write);
canvasRendering.Serialize(serializedCanvas);
serializedCanvas.Close();
When you need to reload the serialized version of Canvas, pass the name of the file containing the saved state in the Canvas.Deserialize(Stream) method:
protected void Page_Load(object sender, EventArgs e)
{
//CanvasViewer1.Canvas.Deserialize(new System.IO.FileStream(Server.MapPath("SerializedCanvas.vobj"),
// System.IO.FileMode.Open, System.IO.FileAccess.Read));
}
Once you have finished customizing the design, it needs to be prepared for printing. AJAX Vector Objects is able to export the print-ready copy to any image format supported by Graphics Mill Web Controls .
After you pass the design state from the client side to your server, the design can be rendered to the print-ready copy. First, you need to decide what resolution the output should have. As the Canvas and CanvasViewer Control topic discusses, Canvas design is defined in points. To export the content to an image format we need to convert points to pixels, which requires image resolution (DPI). It is recommended that you use the DPI of you printing device.
After you find out what output resolution you need, you should use the RenderWorkspace() method to render the design to the print-ready version. For example, let us render the design from the first paragraph to PDF with 72 DPI:
using (var bitmap = canvasRendering.RenderWorkspace(72, ColorSpace.Rgb, System.Drawing.Color.White))
{
bitmap.Save (HostingEnvironment.MapPath("~/" + "Output.pdf"));
}
Now, we can set DPI to 300 and save the same design to TIFF:
using (var bitmap = canvasRendering.RenderWorkspace(300, ColorSpace.Rgb, System.Drawing.Color.White))
{
bitmap.Save(HostingEnvironment.MapPath("~/" + "Output.tif"));
}
You can check that these outputs have different pixel dimensions but retain the same physical size after fulfillment.
The important feature of AJAX Vector Objects is that all text is saved as vector when you export the design to PDF. Thus, you can move or scale vector fonts without quality loss.
Colors on the design may not match colors on the print-ready output, especially in the case of CMYK format. This color mismatch happens due to various factors, such as the device-dependency of image color formats, inks, paper color, etc., that affect output colors. To negate this effect there is a special technique called color management and AJAX Vector Objects supports it. So, if you care about the accuracy of print outputs, this paragraph will help. If you are not familiar with color management, please read the Color Management Basics topic first.
A system that implements color management must be able to obtain the color characteristics from an image's color profiles. AJAX Vector Objects requires two types of profiles: source and destination. Destination is the profile for your print-ready output. Source is the profile for any graphics loaded to Canvas. Different graphics objects may have different profiles. For example, if you load an image to Canvas, it may have its own embedded color profile which uniquely defines the color characteristics of the pixels.
AJAX Vector Objects specifies three profiles for grayscale, RGB, and CMYK color spaces using
GrayscaleColorProfileFileName, RGBColorProfileFileName, and CmykColorProfileFileName, respectively.
The best way to configure the color profiles is to set them in Web.config:
<configSections>
<section name="Aurigma.GraphicsMill.AjaxControls.VectorObjects" type="System.Configuration.NameValueSectionHandler,
System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
</configSections>
<Aurigma.GraphicsMill.AjaxControls.VectorObjects>
<add key="RgbColorProfileFileName" value="C:\filePath\rgbColorProfile.icc" />
<add key="GrayscaleColorProfileFileName" value="C:\filePath\grayscaleColorProfile.icc" />
<add key="CmykColorProfileFileName" value="C:\filePath\cmykColorProfile.icc" />
</Aurigma.GraphicsMill.AjaxControls.VectorObjects>
By default, profiles specified with these three settings are used as destination color profiles, depending on the color space passed in the Canvas.RenderWorkspace method. For example, if you render the Canvas state to a CMYK print-ready output, the profile configured in Canvas.CmykColorProfileFileName will be picked as the destination one.
The rule for source profiles is simple too. If a graphics object has its own embedded profile, it will be used as the source profile.
If it does not have an embedded color profile, one of three profiles configured in Web.config
will be used as the source profile, depending on the color space of the graphics objects. The profile configured in the
Canvas.RgbColorProfileFileName will be picked for RGB objects,
Canvas.CmykColorProfileFileName - for CMYK objects,
and Canvas.GrayscaleColorProfileFileName - for grayscale ones.
If the color profiles are not configured in Web.config or configured files are missing, they are set with default values:
AJAX Vector Objects provides the ability to render the print-ready output without color management.
To disable Color Management when rendering Canvas you should specify the Canvas.PrintColorManagementEnabled
property to false. In addition, AJAX Vector Objects
allows you to choose whether to use Color Management when displaying the design in the web browser with the
Canvas.PreviewColorManagementEnabled property.