https://www.webrtc-experiment.com/Canvas-Designer/canvas-designer-widget.js

1// _______________
2// Canvas-Designer
3
4// Open-Sourced: https://github.com/muaz-khan/Canvas-Designer
5
6// --------------------------------------------------
7// Muaz Khan     - www.MuazKhan.com
8// MIT License   - www.WebRTC-Experiment.com/licence
9// --------------------------------------------------
10
11function CanvasDesigner() {
12    var designer = this;
13    designer.iframe = null;
14
15    var tools = {
16        line: true,
17        arrow: true,
18        pencil: true,
19        dragSingle: true,
20        dragMultiple: true,
21        eraser: true,
22        rectangle: true,
23        arc: true,
24        bezier: true,
25        quadratic: true,
26        text: true,
27        image: true,
28        pdf: true,
29        marker: true,
30        zoom: true,
31        lineWidth: true,
32        colorsPicker: true,
33        extraOptions: true,
34        code: true
35    };
36
37    designer.icons = {
38        line: null,
39        arrow: null,
40        pencil: null,
41        dragSingle: null,
42        dragMultiple: null,
43        eraser: null,
44        rectangle: null,
45        arc: null,
46        bezier: null,
47        quadratic: null,
48        text: null,
49        image: null,
50        pdf: null,
51        pdf_next: null,
52        pdf_prev: null,
53        pdf_close: null,
54        marker: null,
55        zoom: null,
56        lineWidth: null,
57        colorsPicker: null,
58        extraOptions: null,
59        code: null
60    };
61
62    var selectedIcon = 'pencil';
63
64    function syncData(data) {
65        if (!designer.iframe) return;
66
67        designer.postMessage({
68            canvasDesignerSyncData: data
69        });
70    }
71
72    var syncDataListener = function(data) {};
73    var dataURLListener = function(dataURL) {};
74    var captureStreamCallback = function() {};
75
76    function onMessage(event) {
77        if (!event.data || event.data.uid !== designer.uid) return;
78
79        if(!!event.data.sdp) {
80            webrtcHandler.createAnswer(event.data, function(response) {
81                if(response.sdp) {
82                    designer.postMessage(response);
83                    return;
84                }
85
86                captureStreamCallback(response.stream);
87            });
88            return;
89        }
90
91        if (!!event.data.canvasDesignerSyncData) {
92            designer.pointsLength = event.data.canvasDesignerSyncData.points.length;
93            syncDataListener(event.data.canvasDesignerSyncData);
94            return;
95        }
96
97        if (!!event.data.dataURL) {
98            dataURLListener(event.data.dataURL);
99            return;
100        }
101    }
102
103    function getRandomString() {
104        if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
105            var a = window.crypto.getRandomValues(new Uint32Array(3)),
106                token = '';
107            for (var i = 0, l = a.length; i < l; i++) {
108                token += a[i].toString(36);
109            }
110            return token;
111        } else {
112            return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
113        }
114    }
115
116    designer.uid = getRandomString();
117
118    designer.appendTo = function(parentNode, callback) {
119        callback = callback || function() {};
120
121        designer.iframe = document.createElement('iframe');
122        
123        // designer load callback
124        designer.iframe.onload = function() {
125            callback();
126            callback = null;
127        };
128
129        designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon + '&icons=' + JSON.stringify(designer.icons);
130        designer.iframe.style.width = '100%';
131        designer.iframe.style.height = '100%';
132        designer.iframe.style.border = 0;
133
134        window.removeEventListener('message', onMessage);
135        window.addEventListener('message', onMessage, false);
136
137        parentNode.appendChild(designer.iframe);
138    };
139
140    designer.destroy = function() {
141        if (designer.iframe) {
142            designer.iframe.parentNode.removeChild(designer.iframe);
143            designer.iframe = null;
144        }
145        window.removeEventListener('message', onMessage);
146    };
147
148    designer.addSyncListener = function(callback) {
149        syncDataListener = callback;
150    };
151
152    designer.syncData = syncData;
153
154    designer.setTools = function(_tools) {
155        tools = _tools;
156    };
157
158    designer.setSelected = function(icon) {
159        if (typeof tools[icon] !== 'undefined') {
160            selectedIcon = icon;
161        }
162    };
163
164    designer.toDataURL = function(format, callback) {
165        dataURLListener = callback;
166
167        if (!designer.iframe) return;
168        designer.postMessage({
169            genDataURL: true,
170            format: format
171        });
172    };
173
174    designer.sync = function() {
175        if (!designer.iframe) return;
176        designer.postMessage({
177            syncPoints: true
178        });
179    };
180
181    designer.pointsLength = 0;
182
183    designer.undo = function(index) {
184        if (!designer.iframe) return;
185
186        if(typeof index === 'string' && tools[index]) {
187            designer.postMessage({
188                undo: true,
189                tool: index
190            });
191            return;
192        }
193
194        designer.postMessage({
195            undo: true,
196            index: index || designer.pointsLength - 1 || -1
197        });
198    };
199
200    designer.postMessage = function(message) {
201        if (!designer.iframe) return;
202
203        message.uid = designer.uid;
204        designer.iframe.contentWindow.postMessage(message, '*');
205    };
206
207    designer.captureStream = function(callback) {
208        if (!designer.iframe) return;
209
210        captureStreamCallback = callback;
211        designer.postMessage({
212            captureStream: true
213        });
214    };
215
216    designer.clearCanvas = function () {
217        if (!designer.iframe) return;
218
219        designer.postMessage({
220            clearCanvas: true
221        });
222    };
223
224    designer.renderStream = function() {
225        if (!designer.iframe) return;
226
227        designer.postMessage({

228            renderStream: true
229        });
230    };
231
232    designer.widgetHtmlURL = 'widget.html';
233    designer.widgetJsURL = 'widget.min.js';
234}