Need some drawings in your web application?
Many companies throughout Europe and North America have used Zwibbler as an easy solution to add graphics capabilities into their products.
Become a licensed partner of Zwibbler to add powerful graphics editing and annotation to your product. Hire HTML5 and Graphics expert Steve Hanov to customize Zwibbler for your users. You will also receive full source code, so if you desire, you may make any changes in the future if necessary.
Email today for an estimate.
Zwibbler Integration Guide for licensed partners.
Add Zwibbler.com your own web applications, by adding a single line of code to your HTML file.
<script
src="http://zwibbler.com/component.js#width=700&height=600"
type="text/javascript"></script>
Use the Javascript functions described here to load and save drawings. You can save them as a PNG, SVG, PDF pdf file, or as a string that you can load again later.
You can change the width and height to fit into your web page. The dimensions are the size, in pixels, of the entire Zwibbler.com editing frame, including all of the controls. It is not possible to set the size of the resulting image, because it is always the size of the user's drawing.
Temporarily save the document to a file on Zwibbler.com, giving a URL
When the user is done editing a file, you can retrieve it as an image file. Vaild file formats are:
This file will be temporarily stored on Zwibbler.com servers for a few minutes, to give you time to retrieve it.
The saving will take a moment, and when completed, Zwibbler will call your reply function with the URL to the file as the first parameter.
zwibbler.saveToTemporaryFile(
"png",
function(url) {
alert("Got temporary url: " + url );
document.getElementById("image").src = url;
});
Save a document to a string.
This is useful, because if you want to be able to go back and edit the drawing later, you can load it using loadFromString(). If you don't ever need to edit it again, just use saveToTemporaryFile().
The document is returned by calling the reply function. The reply function takes a string as the first parameter.
zwibbler.saveToString(function(src) {
alert("The document as a string is: " + src );
});
Load a document from a string.
A document can be stored to a string using zwibbler.saveToString(). This function will load it again. When zwibbler finishes loading the document, it will call the replyFunction, if one is specified.
zwibbler.loadFromString(
document.getElementById("text").value,
function() {
alert("Finished loading from a string.");
});
Hides the editing area.
This will make the editing area disappear completely. For example, when the user is finished editing, you might want to replace the editing area with the resulting image. You can show it again using zwibbler.show()
zwibbler.hide();
Shows the editing area after it has been hidden.
zwibbler.show();
Retrieves the DOM node of the Zwibbler editing area
var iframe = zwibbler.getFrame();
iframe.style.border = "5px solid purple";