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.
When you build a printing company website, you want to provide users with a rich and responsive experience. AJAX Vector Objects is a class library designed on top of the ASP.NET platform that allows you to add an online interactive graphics editor to the website with ease. Using this editor, customers will be able to create print products online and submit them for production without even visiting the print shop's office.
This topic focuses on explaining how AJAX Vector Objects technology works and what features it offers.
AJAX Vector Objects offers the following functionality out of the box:
The centerpiece of AJAX Vector Objects is the canvas control. It is built on top of HTML5 <canvas> and provides a powerful object model. Canvas operates on the client side and sends asynchronous requests sent to the server in the background without interfering with the user interface. This allows updating only a part of the content without reloading the entire page.
The basic concept of the AJAX Vector Objects technique is the interactivity between canvas and users. The library architecture, shown on the following illustration, supports this concept:
Now let us consider each element of the AJAX Vector Objects architecture in more detail.
Canvas control represented in AJAX Vector Objects is a scrollable and zoomable viewport created for visualization of print designs using HTML5 <canvas>. This powerful technology is supported by all modern web browsers and does not require users to install additional browser extensions.
HTML5 <canvas> allows the creating of magnificent and sophisticated designs but it supports only low-level drawing operations. If you are familiar with Graphics, HTML5 <canvas> works on the same abstraction level. You just "tell" the control what to draw and where. On the <canvas> there is no way to move the previously created object or change its properties (like outline or fill color) without redrawing the whole content.
AJAX Vector Objects eliminates this problem and offers a way to operate on graphic objects. For example, you can draw a rectangle and then change its border color without re-rendering the whole graphic. AJAX Vector Objects also supports SVG, including organizing objects by layers, and many other useful features.
Another important feature is that AJAX Vector Objects automatically optimizes graphics for screen size. Thus, you can display even large graphic objects on the client side without performance issues or a visible loss of quality.
Using the library you can draw a lot of objects, namely, raster images, text, and vector objects (line, rectangle, ellipse, SVG, etc.). Each object can be transformed in the code, but more important is that users can edit all of them interactively.
Users can perform numerous actions on an object: add or remove objects, move them, resize them (proportionally or not), and rotate them. Also, you can "lock" some objects on the design and prevent users from editing them, AJAX Vector Objects supports this feature as well. Users can also interact with the canvas itself by zooming or scrolling its content.
AJAX Vector Objects supports three interaction tools: mouse, touch, and keyboard. Actions on canvas objects such as zoom and scroll operations, can be performed using either a mouse or a touch device. For touch manipulation AJAX Vector Objects supports all standard gestures. The keyboard can also be used for moving objects, for instance, when the object should be accurately positioned.
AJAX Vector Objects supports all modern web browsers including mobile browsers:
Microsoft Internet Explorer (since version 8.0),
For Internet Explorer version 8.0, which has limited support of HTML5 <canvas>, AJAX Vector Objects uses automatic fallback and draws objects on the canvas via VML.
AJAX Vector Objects allows you to create print designs on the canvas programmatically. This means that you can create the whole design or just add several objects to the canvas using the API. For example, you can create a predefined graphic template with the API right before displaying the web page, and then allow a user to finish it.
When the canvas content is changed by a user, the client script automatically keeps API objects reflecting the content up-to-date. This allows making calls to the client API without unnecessary connections to the server, which streamlines and increases the responsiveness of the user interface. However, if the canvas state should be synchronized between the server and client sides, it can be easily organized via postback, AJAX request, websocket, etc. This is needed, for example, when the canvas is being serialized or rendered to the output copy.
AJAX Vector Objects cannot perform all the manipulations only on the client side due to the limited memory and performance of web browsers. Thus, some transformations are done on the server. For example, if you have a raster object and you are enlarging it on the canvas, the client side cannot perform this action without loss of quality. In this case, the server side comes into play. It has the original image and also "knows" the requested image size, current zoom level, and screen size. Based on these data it prepares a new optimized copy of the image and passes it to the client canvas. Connection is then made via AJAX requests that dynamically load data and partially update the canvas without reloading the web page.
You do not need to take care of organizing transport between the client and server side. AJAX Vector Objects does that for you and automatically feeds the canvas state to the server. After the state is updated on the server, it is sent back to the client and the canvas immediately updates its state. A good example of where this can be useful would be when you want to print a design loaded in the canvas to a print-ready file. You just make a postback, get the canvas content in your server code and render it using a special method (see below).
AJAX Vector Objects comes with client scripts embedded in assemblies. Therefore, you do not need to take care of linking the correct versions of scripts with your project. The library will do this automatically.
In AJAX Vector Objects the canvas control and each object on it has the same API for both client and server sides. Thus, all client-side operations mentioned before are available in the server code. This way, in the server code written in C# you can add the canvas control, specify its settings and pre-populate it with a design, then render the page and allow users to customize it.
There are a number of tasks that can be implemented only on the server, for example, serialization and deserialization of designs. The server API allows you to save the current canvas state to a file and then load it for further editing.
When a user is working on a design, most of the work is done on the client side. However, there are situations when the help of the server side is necessary. For example, if the user is resizing a raster object, it might require the server to prepare a copy optimized for the current image and screen size. Another example is rendering text objects. Even though the client side can work with fonts, font support is very limited, which is why all text objects are rendered on the server side. All this logic is done seamlessly and a programmer does not have to address it.
One of the main features of AJAX Vector Objects is the ability to prepare designs for printing. For example, you can render canvas content into a printable postcard designed by the user. AJAX Vector Objects allows you to render the canvas content to a raster image in any format supported by Graphics Mill (for example, JPEG or TIFF). In addition, you can specify resolution in DPI and color space of the resulting image. For instance, you can create an RGB preview with 72 DPI for displaying in a web gallery and CMYK bitmap with 300 DPI for printing out.
Colors on a printed image can look quite different from colors displayed on the screen. This is caused by output devices such as monitors and printers producing colors in a different way. They depend on color profiles to address this problem (for more information see Color Management Basics). AJAX Vector Objects supports color profiles and can apply color management while preparing graphics for displaying in the web browser or rendering a print-ready copy.