crysyan

a web drawing board with canvas

1、simple UI version
2、draw image to canvas's backgroup and covert canvas to image（png）
3、widgets：simple pencil、eraser、iamge、clear、revoke and anti-revoke.

home: https://home.cbping.vip/crysyan/

download png

Index

Compatibility
Quick start
Directory
Version
Build-in
API Reference
Dependence
Reference
**

Quick start

your.html

<!--<script src="jquery-3.1.1.min.js"></script>-->
<div style="width:1000px; height:1000px;" class="crysyan-designer"></div>
<!-- include the crysyan-designer.js -->
<!--<script src="projectPath/crysyan-designer-min.js"></script>-->
<script src="projectPath/js/crysyan-designer.js"></script>

your.js

// jquery
$(".crysyan-designer").CrysyanDesigner({
    canvas: {
        // px
        width: 900,
        height: 500
    },
}, function(designer) {
    console.dir(designer);
});
//  another
// var designer=CrysyanDesigner({
//     canvas: {
//         // px
//         width: 900,
//         height: 500
//     },
//     toobar: {
//         length: 500
//     }
// }, function(designer) {
//     console.dir(designer);
// });
// designer.appendTo(document.getElementsByClassName("crysyan-designer"));

Compatibility

turn the canvas into a picture and save IE9+, Chrome4+,Firefox3.6(1.9.2)

Version

0.0.9

First

Build-in

widgets

You can use config for below widgets. Sets the widgets needed for a particular instance of a artboard.

config{
    toolbar: {
        widgets:
        ["CursorWidget",
        "PencilWidget",
        "EraserWidget",
        "ImageWidget",
        "UndoWidget",
        "IndoGoWidget",
        "ClearWidget"],
    }
    }

pencil --- PencilWidget to write/draw shapes
eraser --- EraserWidget to erase/clear specific portion of shapes
image --- ImageWidget add external images
uodo --- UndoWidget revoke history of canvas
indo-go --- IndoGoWidget forward revoke history of canvas
clear --- ClearWidget clear canvas

gulp

1、First of all,you need install node.js and gulp and gulp's add-ons which used in gulpfile.js.

2、You can choose which widgets you need to include,in other word, widgets that you can provide to users. Look file gulpfile.js as follows:

widgetPath="js/widget/";
    // widgetsLoad = [widgetPath+"*.js"]; or 
    widgetsLoad = [
        // widget's file name
        widgetPath+"cursor.js",
        widgetPath+"pencil.js",
        widgetPath+"eraser.js",
        widgetPath+"image.js",
        widgetPath+"undo.js",
        widgetPath+"into-go.js",
        widgetPath+"clear.js"];

3、build.

    gulp build

After build successfully. You can find a 'crysyan' folder,the JS files under this folder have been compressed, which can be used in your project, under the 'dist' folder Just like that:

<!-- include the crysyan-designer.js -->
<script src="projectPath/crysyan-designer-min.js"></script>

API Reference

CrysyanDesigner

`appendTo`

CrysyanDesigner is a widget; that widget should be appended to a DOM object. This method allows you pass <body> or any other HTMLDOMElement.

designer.appendTo(document.body || document.documentElement);

The correct name for appendTo is: append-iframe to target HTML-DOM-element

`destroy`

If you want to remove the widget from your HTMLDOMElement.

designer.destroy();

`getView`

You can get a view CrysyanView instance from child iframe:

designer.getView();

`drawBackgroupWithImage`

Draw a image on a canvas as background.

draw DataUrl :

var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIr
GAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn
7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAAr
EgqPcT12VgAAAABJRU5ErkJggg=="
designer.drawBackgroupWithImage(dataurl);

draw Image :

var image=new Image()
image.src="imagePath";
designer.drawBackgroupWithImage(image);

draw File :

var file=new File()
// do something
designer.drawBackgroupWithImage(file);

`toDataUrl`

Get data-URL of your drawings!

window.open(designer.toDataURL('image/png'));

you can download the png:

Note: focus on attribute of download of <a> tag

html:

  <a  id="download-png" download="my-file-name.png">download png</a>

javascript

$("#download-png").click(function () {
    document.getElementById("download-png").href=designer.toDataURL('image/png');
});

`iframe`

You can access designer iframe as following:

designer.iframe.style.border = '5px solid red';

window.open(designer.iframe.src);

designer.iframe will be null/undefined until you call appendTo. So always use this code-block:

if(!designer.iframe) {
    designer.appendTo(document.body);
}
designer.iframe.style.border = '5px solid red';

Config

The configuration of the entire project.

Note:The unit of length is: px.

var designer=CrysyanDesigner({
    ifrName:"",
    projectPath:"",
    canvas: {
        // px
        width: 900,
        height: 500
    },
    toobar: {
        widgetLength: 50,
        widgets:
        [
        "CursorWidget",
        "PencilWidget",
        "EraserWidget",
        "ImageWidget",
        "UndoWidget",
        "IndoGoWidget",
        "ClearWidget"],
    }
    }
}, function(designer) {
    console.dir(designer);
});

`ifrName`

Name of iframe. You do not need to set this value if it is not necessary. Normally, the default value is OK

`projectPath`

Path of crysyan project.

`canvas`

width
```
Width of the  canvas.
```
height
```
Height of the bottom canvas
```

`toolbar`

widgetLength
```
The length of each tool icon.
```

widgets

The widgets you want to use. see `build-in/widgets`.
Normally, the default value is OK.

Crysyan